@pisell/materials 1.0.1 → 1.0.2

package/src/components/form/index.tsx

@@ -0,0 +1,97 @@
+import React, { Component, createRef } from 'react';
+import { Form as OriginalForm } from 'antd';
+
+import { withSingleFunctionChild } from '../../utils/hoc';
+
+class Form extends Component<any, any> {
+  formRef = createRef<any>();
+
+  componentDidUpdate(prevProps: any) {
+    const { values: prevValues } = prevProps;
+    const { values: currentValues } = this.props;
+
+    if (prevValues !== currentValues) {
+      if (currentValues && Object.keys(currentValues).length > 0) {
+        this.formRef.current!.setFieldsValue(currentValues);
+      } else {
+        this.formRef.current!.resetFields();
+      }
+    }
+  }
+
+  componentDidMount() {
+    const { values } = this.props;
+
+    Object.defineProperties(
+      this,
+      Object.keys(this.formRef.current).reduce((out, key) => {
+        const property = this.formRef.current[key];
+        let getter = () => property;
+        if (typeof property === 'function') {
+          getter = () => property.bind(this.formRef.current);
+        }
+        out[key] = { get: getter };
+        return out;
+      }, {} as Record<string, any>),
+    );
+
+    // 绑定表达式的时候，初次不生效，需要第一次调用一下 setFieldsValue
+    if (values) {
+      this.formRef.current!.setFieldsValue(values);
+    }
+  }
+
+  render() {
+    const { values, ...rest } = this.props;
+
+    return <OriginalForm ref={this.formRef} {...rest} />;
+  }
+}
+
+(Form as any).Item = (props: any) => {
+  const { name, requiredobj, typeobj, patternobj, lenobj, validator } = props;
+
+  const rules = [];
+  if (requiredobj && requiredobj.required) {
+    rules.push(requiredobj);
+  }
+  if (typeobj && typeobj.type) {
+    rules.push(typeobj);
+  }
+  if (patternobj && patternobj.pattern) {
+    rules.push(patternobj);
+  }
+  if (lenobj && (lenobj.max || lenobj.min)) {
+    rules.push(lenobj);
+  }
+  if (validator && typeof validator === 'function') {
+    rules.push({
+      validator: (_: any, value: any) => validator(value),
+    });
+  }
+
+  const namePath =
+    typeof name === 'string' && name.indexOf('.') > 0 ? name.split('.') : name;
+
+  // https://ant.design/components/form-cn/#components-form-demo-complex-form-control
+  // <Form.Item name="field" /> 只会对它的直接子元素绑定表单功能
+  const { children, ...other } = props
+  let node = children
+  if (Array.isArray(children) && children.length === 1) { // 如果 children.length > 1， 说明 Form.Item 只充当布局的作用
+    node = children[0]
+  }
+
+  return (
+    <OriginalForm.Item
+      {...other}
+      name={namePath}
+      rules={rules}
+    >
+      { node }
+    </OriginalForm.Item>
+  );
+};
+
+(Form as any).List = withSingleFunctionChild(OriginalForm.List);
+
+export default Form;

package/src/components/icon/index.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef, Ref } from 'react';
+import * as icons from '@ant-design/icons';
+
+const createFromIconfontCN = icons.createFromIconfontCN;
+interface IconProps {
+  type: string;
+  className?: string;
+  size?: number;
+  color?: string;
+  rotate?: number;
+  spin?: boolean;
+  style?: React.CSSProperties;
+}
+
+const Icon = (props: IconProps, ref: Ref<any>) => {
+  const { type = '', size, color, ...rest } = props;
+
+  const IconComp = ((icons || {}) as any)[type];
+
+  const style = {
+    ...rest.style,
+    fontSize: size,
+    color,
+  };
+
+  if (!IconComp) {
+    const IconFont = createFromIconfontCN();
+    return <IconFont type={type} {...rest} style={style} ref={ref} />;
+  }
+
+  return <IconComp {...rest} style={style} twoToneColor={color} ref={ref} />;
+};
+
+export default forwardRef(Icon);

package/src/components/input/index.tsx

@@ -0,0 +1,18 @@
+import { Input as OriginalInput } from 'antd';
+import { withWrap } from '../../utils/hoc';
+
+const {
+  Group: OriginalGroup,
+  TextArea: OriginalTextArea,
+  Password: OriginalPassword,
+  Search: OriginalSearch,
+} = OriginalInput;
+
+const Input = withWrap(OriginalInput);
+
+(Input as any).Group = OriginalGroup;
+(Input as any).TextArea = withWrap(OriginalTextArea);
+(Input as any).Password = withWrap(OriginalPassword);
+(Input as any).Search = withWrap(OriginalSearch);
+
+export default Input;

package/src/components/modal/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Modal as OriginalModal } from 'antd';
+
+const Modal: any = (props: any) => {
+  const innerProps: any = {};
+  if (props.__designMode === 'design') {
+    // 低代码编辑态中强制显示，将控制权交给引擎侧
+    innerProps.open = true;
+  }
+  return <OriginalModal {...props} {...innerProps} />;
+};
+Modal.info = OriginalModal.info;
+Modal.success = OriginalModal.success;
+Modal.error = OriginalModal.error;
+Modal.warning = OriginalModal.warning;
+Modal.warn = OriginalModal.warn;
+Modal.confirm = OriginalModal.confirm;
+export default Modal;

package/src/components/radio/index.tsx

@@ -0,0 +1,7 @@
+import { Radio as OriginalRadio } from 'antd';
+import { withWrap } from '../../utils/hoc';
+
+const Radio = withWrap(OriginalRadio);
+(Radio as any).Group = OriginalRadio.Group;
+
+export default Radio;

package/src/components/select/index.tsx

@@ -0,0 +1,6 @@
+import { Select as OriginalSelect } from 'antd';
+import { withWrap } from '../../utils/hoc';
+
+const Select = withWrap(OriginalSelect);
+
+export default Select;

package/src/components/skeleton/index.tsx

@@ -0,0 +1,6 @@
+import { Skeleton as OriginalSleleton } from 'antd';
+import { withSingleChild } from '../../utils/hoc';
+
+console.log(OriginalSleleton,'OriginalSleleton');
+const Skeleton = withSingleChild(OriginalSleleton, ['children']);
+export default Skeleton;

package/src/components/slider/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Slider } from 'antd';
+const SliderOuter = (props: any) => {
+  const { range } = props;
+  let { defaultValue } = props;
+  if (range) {
+    defaultValue = Array.isArray(defaultValue)
+      ? defaultValue
+      : [0, defaultValue];
+  } else {
+    defaultValue = Array.isArray(defaultValue)
+      ? defaultValue[1] || defaultValue[0]
+      : defaultValue;
+  }
+  return <Slider {...props} defaultValue={defaultValue}></Slider>;
+};
+
+export default SliderOuter;

package/src/components/table/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Table as OriginalTable } from 'antd';
+
+const Table = (props: any) => {
+  const columns = (props.columns || []).filter((item: any) => !item?.hidden);
+
+  return <OriginalTable {...props} columns={columns} />;
+};
+
+export default Table;

package/src/components/tabs/index.tsx

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import { TabPaneProps, Tabs as OriginalTabs } from 'antd';
+import { warning } from '../../utils/warning'
+import type { Tab } from 'rc-tabs/lib/interface';
+
+class Tabs extends Component<any> {
+  state = {
+    activeKey: this.props.activeKey ?? this.props.defaultActiveKey,
+  };
+
+  private _handleChange = (key: string) => {
+    this.setActiveKey(key);
+  };
+
+  // 编辑器里可以通过 this.$(refId).setActiveKey(key) 调用
+  setActiveKey = (key: string) => {
+    const { onChange = () => {} } = this.props;
+    this.setState({ activeKey: key });
+    onChange(key);
+  };
+
+  // 编辑器里可以通过 this.$(refId).getActiveKey() 调用
+  getActiveKey = () => {
+    return this.state.activeKey;
+  };
+
+  render() {
+    const { props } = this;
+    const { activeKey } = this.state;
+
+    const { children } = props
+
+    let items = props.items
+
+    // props.items 存在，只认 props.items
+    // 兼容代码：props.childrens 反推 props.items
+    if (!props.items && Array.isArray(children) && children.length > 0) {
+      warning('Tabs.TabPane is deprecated. Please use `items` directly.')
+      items = children.map((node: React.ReactElement<TabPaneProps>) => {
+        if (React.isValidElement(node)) {
+          const { key, props } = node;
+          const { tab, ...restProps } = props || {};
+          const item: Tab = {
+            key: String(key),
+            ...restProps,
+            label: tab,
+          };
+          return item;
+        }
+        return null
+      }).filter(Boolean)
+    }
+
+    return (
+      <OriginalTabs
+        {...props}
+        items={items}
+        activeKey={activeKey}
+        onChange={this._handleChange}
+      />
+    );
+  }
+}
+
+(Tabs as any).TabPane = OriginalTabs.TabPane;
+
+export default Tabs;

package/src/components/time-picker/index.tsx

@@ -0,0 +1,9 @@
+import { TimePicker as OriginalTimePicker } from 'antd';
+import { withMomentProps } from '../../utils/hoc';
+
+const TimePicker = withMomentProps(OriginalTimePicker, [
+  'defaultValue',
+  'value',
+]);
+
+export default TimePicker;

package/src/components/tree-select/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TreeSelect as OriginTreeSelect } from 'antd';
+
+const TreeSelect: any = (props: any) => {
+  return <OriginTreeSelect {...props} />;
+};
+
+export default TreeSelect;

package/src/components/upload/index.tsx

@@ -0,0 +1,5 @@
+import { Upload as OriginalUpload } from 'antd';
+import { withSingleChild } from '../../utils/hoc';
+
+const Upload = withSingleChild(OriginalUpload, ['children']);
+export default Upload;

package/src/index.tsx

@@ -0,0 +1,141 @@
+export { Affix } from 'antd';
+
+export { Anchor } from 'antd';
+
+export { Alert } from 'antd';
+
+export { Avatar } from 'antd';
+
+export { Badge } from 'antd';
+
+export { Breadcrumb } from 'antd';
+
+export { Card } from 'antd';
+
+export { Collapse } from 'antd';
+
+export { Carousel } from 'antd';
+
+// export { Cascader } from 'antd';
+
+// export { Checkbox } from 'antd';
+
+export { Col } from 'antd';
+
+export { Descriptions } from 'antd';
+
+export { Divider } from 'antd';
+
+// export { Drawer } from 'antd';
+
+export { Empty } from 'antd';
+
+export { Grid } from 'antd';
+
+// export { Input } from 'antd';
+
+export { Image } from 'antd';
+
+export { InputNumber } from 'antd';
+
+export { List } from 'antd';
+
+export { message } from 'antd';
+
+export { Menu } from 'antd';
+
+export { Mentions } from 'antd';
+
+export { Statistic } from 'antd';
+
+export { notification } from 'antd';
+
+export { PageHeader } from 'antd';
+
+export { Pagination } from 'antd';
+
+export { Popconfirm } from 'antd';
+
+export { Popover } from 'antd';
+
+export { Progress } from 'antd';
+
+// export { Radio } from 'antd';
+
+export { Rate } from 'antd';
+
+export { Result } from 'antd';
+
+export { Row } from 'antd';
+
+// export { Skeleton } from 'antd';
+
+export { Space } from 'antd';
+
+export { Spin } from 'antd';
+
+export { Steps } from 'antd';
+
+export { Switch } from 'antd';
+
+export { Transfer } from 'antd';
+
+export { Tree } from 'antd';
+
+// export { TreeSelect } from 'antd';
+
+// export { Tabs } from 'antd';
+
+export { Tag } from 'antd';
+
+export { Timeline } from 'antd';
+
+export { Tooltip } from 'antd';
+
+export { Typography } from 'antd';
+
+export { version } from 'antd';
+
+export { default as Skeleton } from './components/skeleton';
+
+export { default as Checkbox } from './components/checkbox';
+
+export { default as Button } from './components/button';
+
+export { default as Radio } from './components/radio';
+
+export { default as Upload } from './components/upload';
+
+export { default as Icon } from './components/icon';
+
+export { default as Form } from './components/form';
+
+export { default as Dropdown } from './components/dropdown';
+
+export { default as Calendar } from './components/calendar';
+
+export { default as ConfigProvider } from './components/config-provider';
+
+export { default as DatePicker } from './components/date-picker';
+
+export { default as Tabs } from './components/tabs';
+
+export { default as TimePicker } from './components/time-picker';
+
+export { default as Slider } from './components/slider';
+
+export { default as Table } from './components/table';
+
+export { default as Modal } from './components/modal';
+
+export { default as Drawer } from './components/drawer';
+
+export { default as TreeSelect } from './components/tree-select';
+
+export { default as Input } from './components/input';
+
+export { default as Select } from './components/select'
+
+export { default as Cascader } from './components/cascader';
+
+export { default as AutoComplete } from './components/auto-complete';

package/src/utils/hoc.tsx

@@ -0,0 +1,92 @@
+import React, { ComponentType, forwardRef, Ref } from 'react';
+import { get, set, has } from 'lodash';
+
+function convertProps(
+  props: Record<string, any>,
+  list: string[],
+  mapper: (v: any, key: string) => any,
+) {
+  const out: Record<string, any> = {};
+  list.forEach(key => {
+    if (has(props, key)) {
+      set(out, key, mapper(get(props, key), key));
+    }
+  });
+  return out;
+}
+
+/**
+ * 简单包装，不做任何处理
+ * 部分组件ref比较特殊，包一层会解决这个问题
+ */
+export function withWrap(Comp: ComponentType<any>) {
+  return forwardRef((props: any, ref: Ref<any>) => {
+    return <Comp {...props} ref={ref} />;
+  });
+}
+
+/**
+ * 某些组件会用React.Children.only检查子节点
+ * 需要做处理避免报错
+ */
+export function withSingleChild(
+  Comp: ComponentType<any>,
+  needsConvert = ['children'],
+) {
+  return (props: any) => {
+    const convertedProps = convertProps(props, needsConvert, prop => {
+      let node = React.Children.toArray(prop)[0];
+      if (node === null || typeof node !== 'object') {
+        node = <div>{node}</div>;
+      }
+      return node;
+    });
+
+    return <Comp {...(props as any)} {...(convertedProps as any)} />;
+  };
+}
+
+export function withSingleFunctionChild(Comp: ComponentType<any>) {
+  return (props: any) => {
+    const { children } = props;
+
+    let node;
+    if (typeof children === 'function') {
+      node = children;
+    }
+    if (
+      Array.isArray(children) &&
+      children.length === 1 &&
+      typeof children[0] === 'function'
+    ) {
+      node = children[0];
+    }
+
+    if (node) {
+      return <Comp {...(props as any)}>{node}</Comp>;
+    }
+    return <div>{children}</div>;
+  };
+}
+
+/**
+ * moment对象在序列化后会被转为字符串
+ * 需要让日期类组件支持接受字符串值
+ */
+export function withMomentProps(
+  Comp: ComponentType<any>,
+  needsConvert = ['value', 'defaultValue'],
+) {
+  return (props: any) => {
+    const convertedProps = convertProps(props, needsConvert, prop => {
+      if (prop) {
+        if (Array.isArray(prop)) {
+          return prop.map(v => (moment.isMoment(v) ? v : moment(v)));
+        }
+        return moment.isMoment(prop) ? prop : moment(prop);
+      }
+    });
+
+    return <Comp {...(props as any)} {...(convertedProps as any)} />;
+  };
+}

package/src/utils/warning.ts

@@ -0,0 +1,3 @@
+export const warning = (...args: any[]) => {
+  console.warn(args)
+}