feat: 组件初步完成

.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

.env

@@ -0,0 +1,2 @@
+BROWSER=none
+ESLINT=1

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "eslint-config-umi"
+}

.gitignore

@@ -0,0 +1,18 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+
+# misc
+.DS_Store
+
+# umi
+.umi
+.umi-production

.prettierignore

@@ -0,0 +1,7 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}

.umirc.ts

@@ -0,0 +1,44 @@
+import { IConfig } from 'umi-types'; // ref: https://umijs.org/config/
+
+const config: IConfig = {
+  treeShaking: true,
+  routes: [
+    {
+      path: '/',
+      component: '../layouts/index',
+      routes: [
+        {
+          path: '/demo',
+          component: './demo',
+        },
+        {
+          path: '/',
+          component: '../pages/index',
+        },
+      ],
+    },
+  ],
+  plugins: [
+    // ref: https://umijs.org/plugin/umi-plugin-react.html
+    [
+      'umi-plugin-react',
+      {
+        antd: true,
+        dva: true,
+        dynamicImport: false,
+        title: 'picture-select',
+        dll: false,
+        routes: {
+          exclude: [
+            /models\//,
+            /services\//,
+            /model\.(t|j)sx?$/,
+            /service\.(t|j)sx?$/,
+            /components\//,
+          ],
+        },
+      },
+    ],
+  ],
+};
+export default config;

package.json

@@ -0,0 +1,42 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "umi dev",
+    "build": "umi build",
+    "test": "umi test",
+    "lint": "eslint {src,mock,tests}/**/*.{ts,tsx} --fix",
+    "precommit": "lint-staged"
+  },
+  "dependencies": {
+    "dva": "^2.6.0-beta.6",
+    "antd": "^3.19.5",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "devDependencies": {
+    "@types/jest": "^23.3.12",
+    "@types/react": "^16.7.18",
+    "@types/react-dom": "^16.0.11",
+    "@types/react-test-renderer": "^16.0.3",
+    "babel-eslint": "^9.0.0",
+    "eslint": "^5.4.0",
+    "eslint-config-umi": "^1.4.0",
+    "eslint-plugin-flowtype": "^2.50.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-react": "^7.11.1",
+    "husky": "^0.14.3",
+    "lint-staged": "^7.2.2",
+    "react-test-renderer": "^16.7.0",
+    "umi": "^2.9.0",
+    "umi-plugin-react": "^1.8.0",
+    "umi-types": "^0.3.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": ["eslint --fix", "git add"],
+    "*.{js,jsx}": ["eslint --fix", "git add"]
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  }
+}

src/app.ts

@@ -0,0 +1,8 @@
+export const dva = {
+  config: {
+    onError(err: ErrorEvent) {
+      err.preventDefault();
+      console.error(err.message);
+    },
+  },
+};

src/components/picSelect/index.less

@@ -0,0 +1,22 @@
+:global {
+  .pic-select {
+    .pic-list {}
+
+    .pic-item {
+      display: inline-block;
+      position: relative;
+      width: 200px;
+      height: 200px;
+
+      &-content {
+        width: 100%;
+        height: 100%;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+      }
+
+      &-name {}
+    }
+  }
+}

src/components/picSelect/index.tsx

@@ -0,0 +1,77 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Checkbox } from 'antd';
+import './index.less';
+
+export interface PicTureProps {
+  id: string;
+  name: string;
+  url: string;
+}
+interface PicSelectProps {
+  value?: string[];
+  onChange?: (v: string[]) => void;
+  list?: PicTureProps[];
+}
+/** 图片选择组件，样式还没来得及写 */
+const PicSelect: React.FC<PicSelectProps> = props => {
+  const { value, onChange, list } = props;
+  useEffect(() => {
+    setLocalValue(value || []);
+  }, [value]);
+  const [localValue, setLocalValue] = useState<string[]>([]);
+  /** 单个选择回调 */
+  const singeChange = useCallback(
+    (id: string) => {
+      const tIndex = localValue.indexOf(id);
+      let nowValue: string[] = [];
+      if (tIndex !== -1) {
+        nowValue = [...localValue];
+        nowValue.splice(tIndex, 1);
+      } else {
+        nowValue = [...localValue, id];
+      }
+      setLocalValue(nowValue);
+      onChange && onChange(nowValue);
+    },
+    [localValue, onChange],
+  );
+  /** 全选按钮是否全部选中 */
+  const allCircled = useMemo(() => {
+    return list?.every((item: PicTureProps) => localValue.includes(item.id));
+  }, [localValue, list]);
+  /** 全选按钮点击回调 */
+  const allCircleChange = useCallback(() => {
+    let nowValue: string[] = [];
+    if (allCircled) {
+      nowValue = [];
+    } else {
+      nowValue = [...(list?.map(item => item.id) || [])];
+    }
+    setLocalValue(nowValue);
+    onChange && onChange(nowValue);
+  }, [list, onChange, localValue, allCircled]);
+  return (
+    <div className="pic-select">
+      <div className="pic-all-circle">
+        <Checkbox checked={allCircled} onChange={allCircleChange} />
+        <span>已选中{localValue.length}张</span>
+      </div>
+      <div className="pic-list">
+        {list?.map(item => (
+          <div key={item.id} className="pic-item">
+            <Checkbox
+              onChange={() => {
+                singeChange(item.id);
+              }}
+              checked={localValue?.includes(item.id)}
+            ></Checkbox>
+            <div className="pic-item-content" style={{ backgroundImage: `url(${item.url})` }} />
+            <div className="pic-item-name">{item.name}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default PicSelect;

src/global.css

@@ -0,0 +1,7 @@
+html, body, #root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}

src/layouts/__tests__/index.test.tsx

@@ -0,0 +1,16 @@
+import 'jest';
+import BasicLayout from '..';
+import React from 'react';
+import renderer, { ReactTestInstance, ReactTestRenderer } from 'react-test-renderer';
+
+describe('Layout: BasicLayout', () => {
+  it('Render correctly', () => {
+    const wrapper: ReactTestRenderer = renderer.create(<BasicLayout />);
+    expect(wrapper.root.children.length).toBe(1);
+    const outerLayer = wrapper.root.children[0] as ReactTestInstance;
+    expect(outerLayer.type).toBe('div');
+    const title = outerLayer.children[0] as ReactTestInstance;
+    expect(title.type).toBe('h1');
+    expect(title.children[0]).toBe('Yay! Welcome to umi!');
+  });
+});

src/layouts/index.css

@@ -0,0 +1,15 @@
+
+.normal {
+  font-family: Georgia, sans-serif;
+  text-align: center;
+}
+
+.title {
+  font-size: 2.5rem;
+  font-weight: normal;
+  letter-spacing: -1px;
+  background: darkslateblue;
+  padding: .6em 0;
+  color: white;
+  margin: 0;
+}

src/layouts/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './index.css';
+
+const BasicLayout: React.FC = props => {
+  return <div className={styles.normal}>{props.children}</div>;
+};
+
+export default BasicLayout;

src/pages/__tests__/index.test.tsx

@@ -0,0 +1,16 @@
+import 'jest';
+import Index from '..';
+import React from 'react';
+import renderer, { ReactTestInstance, ReactTestRenderer } from 'react-test-renderer';
+
+
+describe('Page: index', () => {
+  it('Render correctly', () => {
+    const wrapper: ReactTestRenderer = renderer.create(<Index />);
+    expect(wrapper.root.children.length).toBe(1);
+    const outerLayer = wrapper.root.children[0] as ReactTestInstance;
+    expect(outerLayer.type).toBe('div');
+    expect(outerLayer.children.length).toBe(2);
+
+  });
+});

src/pages/demo/index.less

@@ -0,0 +1,4 @@
+
+.normal {
+  background: #F279EE;
+}

src/pages/demo/index.tsx

@@ -0,0 +1,34 @@
+import React, { useState, useCallback } from 'react';
+import PicSelect from '@/components/picSelect';
+import './index.less';
+
+const pictures = [
+  {
+    id: '1',
+    name: 'foo',
+    url: 'https://gw.alipayobjects.com/mdn/rms_d212b7/afts/img/A*LlfeSa8N0WgAAAAAAAAAAABkARQnAQ',
+  },
+  {
+    id: '2',
+    name: 'foo',
+    url: 'https://gw.alipayobjects.com/mdn/rms_d212b7/afts/img/A*LlfeSa8N0WgAAAAAAAAAAABkARQnAQ',
+  },
+  {
+    id: '3',
+    name: 'foo',
+    url: 'https://gw.alipayobjects.com/mdn/rms_d212b7/afts/img/A*LlfeSa8N0WgAAAAAAAAAAABkARQnAQ',
+  },
+];
+const Demo: React.FC = () => {
+  const [picValue, setPicValue] = useState<string[]>([]);
+  const onChange = useCallback((values: string[]) => {
+    setPicValue(values);
+  }, []);
+  return (
+    <div className="demo">
+      <PicSelect list={pictures} onChange={onChange} value={picValue}></PicSelect>
+    </div>
+  );
+};
+
+export default Demo;

src/pages/index.css

@@ -0,0 +1,23 @@
+
+.normal {
+  font-family: Georgia, sans-serif;
+  margin-top: 4em;
+  text-align: center;
+}
+
+.welcome {
+  height: 512px;
+  background: url(../assets/yay.jpg) no-repeat center 0;
+  background-size: 512px 512px;
+}
+
+.list {
+  font-size: 1.2em;
+  margin: 1.8em 0 0;
+  list-style: none;
+  line-height: 1.5em;
+}
+
+.list code {
+  background: #f7f7f7;
+}