feat: icon more icons

ChocolateUI · Sep 5, 2021 · e9449a7 · e9449a7
1 parent 11496df
commit e9449a7
Show file tree

Hide file tree

Showing 9 changed files with 6,143 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -36,9 +36,9 @@
   ],
   "dependencies": {
     "@babel/core": "7.12.3",
-    "@fortawesome/fontawesome-svg-core": "^1.2.30",
-    "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@fortawesome/react-fontawesome": "0.1.14",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "0.1.15",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
     "@svgr/webpack": "5.5.0",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
@@ -53,6 +53,7 @@
     "camelcase": "^6.1.0",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
     "classnames": "^2.2.6",
+    "copy-to-clipboard": "^3.3.1",
     "css-loader": "4.3.0",
     "dayjs": "^1.9.8",
     "dotenv": "8.2.0",

diff --git a/src/components/InputDatePicker/calendar.tsx b/src/components/InputDatePicker/calendar.tsx
@@ -15,7 +15,7 @@ export interface CalendarProps {
 
 function Calendar(props: CalendarProps) {
   const { selectedDate, onSelectDate } = props;
-  const [isDateView, setDateView] = useState(false);
+  const [isDateView, setDateView] = useState(true);
   const calendarRef = useRef(null);
 
   const today = new Date();

diff --git a/src/components/InputDatePicker/dateView.tsx b/src/components/InputDatePicker/dateView.tsx
@@ -52,15 +52,15 @@ function DateView(props: DateViewProps & CalendarProps) {
         />
       }
       header={{
-        leftElement: <Icon icon="arrow-left" onClick={goToPreviousMonth} />,
+        leftElement: <Icon icon="angle-left" onClick={goToPreviousMonth} />,
         middleElement: (
           <HeaderTitle
             year={year}
             monthIndex={monthIndex}
             onTitleClick={onTitleClick}
           />
         ),
-        rightElement: <Icon icon="arrow-right" onClick={goToNextMonth} />,
+        rightElement: <Icon icon="angle-right" onClick={goToNextMonth} />,
       }}
       footerElement={
         <Button btnType="ghost" onClick={onClickToday}>

diff --git a/src/components/InputDatePicker/inputDatePicker.tsx b/src/components/InputDatePicker/inputDatePicker.tsx
@@ -26,8 +26,7 @@ export const InputDatePicker: FC<InputDatePickerProps> = (props) => {
     <FocusManager onFocus={onFocus} onBlur={onBlur} tabIndex={0}>
       <DateManager onChange={props.onChange}>
         <InputComponent />
-        {/* {showPicker && <Picker />} */}
-        {<Picker />}
+        {showPicker && <Picker />}
       </DateManager>
     </FocusManager>
   );

diff --git a/src/components/InputDatePicker/monthYearView.tsx b/src/components/InputDatePicker/monthYearView.tsx
@@ -26,7 +26,7 @@ function MonthYearView(props: DateViewProps) {
   return (
     <ViewLayout
       header={{
-        leftElement: <Icon icon="arrow-left" onClick={onBackClick} />,
+        leftElement: <Icon icon="angle-left" onClick={onBackClick} />,
         middleElement: (
           <HeaderTitle {...calendar} onSelectYear={onSelectYear} />
         ),

diff --git a/src/components/icons/icon.stories.tsx b/src/components/icons/icon.stories.tsx
@@ -0,0 +1,103 @@
+import React from "react";
+import { Story, Meta } from "@storybook/react";
+import Icon, { IconProps } from "./icon";
+import iconsCache from "./shared/res";
+import copy from "copy-to-clipboard";
+
+const buildIcons = (props: IconProps, icons: any) => {
+  const { theme } = props;
+
+  return (
+    <>
+      <h6> 一共支持 {Object.keys(iconsCache).slice(0, 256).length} 种图标 </h6>
+      <br />
+      <ul
+        style={{
+          display: "flex",
+          flexFlow: "row wrap",
+          listStyle: "none",
+        }}
+      >
+        {Object.keys(iconsCache)
+          .splice(0, 256)
+          .map((key, index) => {
+            const iconName = icons[key].iconName;
+            const _length = iconName.split("-").length;
+            return (
+              <li
+                className="svgCls"
+                style={{
+                  display: "inline-flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  flex: "0 1 20%",
+                  minWidth: 120,
+                  padding: "0px 7.5px 20px",
+                  cursor: "pointer",
+                }}
+                onClick={(e) => {
+                  copy(iconName);
+                  alert('复制成功')
+                }}  
+                key={index}
+              >
+                <Icon theme={theme} icon={iconName} />
+                <div
+                  style={{
+                    color: "#666",
+                    fontSize: 12,
+                    width: 70,
+                    overflow: "hidden",
+                  }}
+                >
+                  <span>{iconName.split("-")[_length - 1]}</span>
+                </div>
+              </li>
+            );
+          })}
+      </ul>
+    </>
+  );
+};
+
+const BaseIcon = (props: IconProps) => {
+  return buildIcons(props, iconsCache);
+};
+
+export default {
+  Component: Icon,
+  title: "Icon",
+  argTypes: {
+    theme: {
+      options: [
+        "primary",
+        "secondary",
+        "success",
+        "info",
+        "warning",
+        "danger",
+        "light",
+        "dark",
+      ],
+      control: { type: "select" },
+    },
+  },
+  parameters: {
+    docs: {
+      //   page: IconDoc,
+      source: {
+        type: "code",
+      },
+    },
+    controls: { include: ["theme"] },
+  },
+} as Meta;
+
+const _default: Story<IconProps> = (args) => <BaseIcon {...args} />;
+
+// default
+export const ShowIcons = _default.bind({});
+
+ShowIcons.args = {
+  theme: "primary",
+};
diff --git a/src/components/icons/icon.tsx b/src/components/icons/icon.tsx
@@ -3,13 +3,11 @@ import classNames from 'classnames'
 import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome'
 
 export type ThemeProps = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'light' | 'dark'
-
 export interface IconProps extends FontAwesomeIconProps {
   theme? : ThemeProps
 }
 
 const Icon: React.FC<IconProps> = (props) => {
-  // icon-primary
   const { className, theme, ...restProps } = props
   const classes = classNames('chocolate-icon', className, {
     [`icon-${theme}`]: theme