@titaui/pc 1.7.13 → 1.7.17

package/src/components/form/form-fields/textarea/index.tsx

@@ -0,0 +1,139 @@
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+import classNames from 'classnames';
+import ToolTip from '../../../tooltip/error-tip';
+import './index.scss'
+
+const preCls = 'form-field-textarea';
+
+interface verify {
+  tip: string;
+  test: RegExp;
+}
+
+interface Props {
+  label: string;
+  verifies?: verify[];
+  placeholder?: string;
+  onChange?: Function;
+  value?: any;
+  require?: boolean;
+  name: string;
+  getContainer?: Function;
+  resizeType: 'none' | 'vertical';//不能修改宽度
+  areaHeight: number;
+}
+
+interface Error {
+  name: string;
+  tip: string;
+}
+
+const OverlayInner = ({ hasError, hasActive, tip }) => {
+  if (hasError) return <span style={{ 'color': '#F05E5E' }}>{tip}</span>;
+  if (hasActive) return <span style={{ 'color': '#3F4755' }}>{tip}</span>;
+  return <span />;
+}
+export default forwardRef((props: Props, ref) => {
+  const {
+    label,
+    verifies,
+    placeholder,
+    onChange,
+    require,
+    name,
+    getContainer,
+    resizeType = 'none',
+    areaHeight,
+  } = props
+
+  const [hasError, setHasError] = useState<boolean>(false);
+  const [hasActive, setHasActive] = useState<boolean>(false);
+  const [tip, setTip] = useState<string>('');
+  const [value, setValue] = useState<string>(props.value || '');
+  const inputRef = useRef<any>();
+
+  useEffect(() => {
+    setValue(props.value);
+  }, [props.value])
+
+  const verifing = (): Error[] => {
+    const value = inputRef.current && inputRef.current.value;
+    if (!verifies || !verifies.length) return [];
+    if (!require && !value) return [];
+    const errors: Error[] = [];
+    for (let i = 0; i < verifies.length; i++) {
+      let { test, tip } = verifies[i];
+      if (!value.match(test)) {
+        errors.push({ name, tip });
+      }
+    }
+    return errors;
+  }
+
+  const onInputFocusHandler = () => {
+    setHasActive(true);
+    inputRef.current.setSelectionRange(9999999, 9999999);
+  }
+
+  const onBlurHandler = () => {
+    setHasActive(false);
+  }
+
+  const onChangeHandler = () => {
+    const value = inputRef.current && inputRef.current.value;
+    onChange && onChange(value);
+    setValue(value);
+    const errors = verifing();
+    if (errors.length) {
+      setHasError(true);
+      setTip(errors[0].tip);
+    } else {
+      setHasError(false);
+      setTip('');
+    }
+  }
+
+  useImperativeHandle(ref, () => ({
+    'verifing': (): Error[] => {
+      const errors = verifing();
+      if (errors.length) {
+        setHasError(true);
+        setTip(errors[0].tip);
+        inputRef.current.focus();
+      }
+      return errors;
+    }
+  }))
+
+  return (
+    <div className={classNames(preCls)}>
+      <div className={classNames(`${preCls}__label`)}>
+        <span className={classNames(`${preCls}__label-text`)}>{label}</span>
+        {require && <span className={classNames(`${preCls}__label-require`)}>*</span>}
+      </div>
+      <div className={classNames(`${preCls}__border`, {
+        [`${preCls}__border--error`]: hasError,
+        [`${preCls}__border--active`]: hasActive
+      })}>
+        <ToolTip
+          placement={'topLeft'}
+          destroyTooltipOnHide={true}
+          visible={(hasActive || hasError) && tip}
+          overlay={<OverlayInner hasActive={hasActive} hasError={hasError} tip={tip} />}
+          getTooltipContainer={getContainer}
+        >
+          <textarea
+            ref={inputRef}
+            className={classNames(`${preCls}__textarea`)}
+            value={value}
+            placeholder={placeholder}
+            onFocus={onInputFocusHandler}
+            onBlur={onBlurHandler}
+            onChange={onChangeHandler}
+            style={{ resize: resizeType, height: `${areaHeight}px` }}
+          />
+        </ToolTip>
+      </div>
+    </div>
+  )
+})

package/src/components/form/form-fields/user/index.scss

@@ -0,0 +1,79 @@
+.form-field-user {
+
+  &__label {
+    height: 22px;
+    font-size: 14px;
+    margin-bottom: 5px;
+    font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+    font-weight: 400;
+    line-height: 22px;
+
+    &-text {
+      color: #3f4755;
+    }
+
+    &-require {
+      color: red;
+    }
+  }
+
+  &__border {
+    padding: 6px 12px;
+    border-radius: 3px;
+    transition: all 0.2s;
+    border: 1px solid #e9ecf0;
+    box-sizing: border-box;
+  }
+  &__border--error {
+    box-shadow: 0px 0px 4px 0px rgba(240, 94, 94, 0.3) !important;
+    border: 1px solid #f05e5e !important;
+  }
+  &__border--active {
+    box-shadow: 0px 0px 4px 0px rgba(40, 121, 255, 0.3);
+    border: 1px solid #2879ff;
+  }
+  
+  &__input {
+    height: 22px;
+    line-height: 22px;
+    width: calc(100% - 36px);
+    font-size: 14px;
+    font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+    font-weight: 400;
+    color: #3f4755;
+    cursor: pointer;
+    position: relative;
+    &:hover{
+      .form-field-user__input--clear{
+        display: block;
+      }
+    }
+    &-avatar {
+      margin-right: 5px;
+    }
+
+    &--placeholder {
+      color: #bfc7d5;
+    }
+    &--clear{
+      display: none;
+      color: #c2cbd1;
+      position: absolute;
+      right: -10px;
+      top: 50%;
+      transform: translate(0, -50%);
+      cursor: pointer;
+      &:hover{
+        color: #f05e5e;
+      }
+    }
+    &--down {
+      color: #c2cbd1;
+      position: absolute;
+      right: -32px;
+      top: 50%;
+      transform: translate(0, -50%);
+      cursor: pointer;
+    }
+  }
+}

package/src/components/form/form-fields/user/index.tsx

@@ -0,0 +1,167 @@
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import classNames from 'classnames';
+import UserSelector from '../../../user-selector';
+import ErrorToolTip from '../../../tooltip/error-tip';
+import UserInput from './user-input';
+import './index.scss';
+
+const preCls = 'form-field-user';
+
+interface verify {
+  tip: string;
+  test: RegExp;
+}
+interface User {
+  id: number;
+  name: string;
+}
+interface Error {
+  name: string;
+  tip: string;
+}
+interface Props {
+  label: string;
+  verifies?: verify[];
+  placeholder?: string;
+  onChange: Function;
+  value?: User[];
+  require?: boolean;
+  multiple?: boolean;
+  maxSize?: number;
+  name: string;
+  getContainer: Function;
+}
+
+const OverlayInner = ({ hasError, hasActive, tip }) => {
+  if (hasError) return <span style={{ 'color': '#F05E5E' }}>{tip}</span>;
+  if (hasActive) return <span style={{ 'color': '#3F4755' }}>{tip}</span>;
+  return <span />;
+}
+
+export default forwardRef((props: Props, ref) => {
+  const {
+    name,
+    label,
+    placeholder,
+    value,
+    onChange,
+    require,
+    maxSize,
+    multiple,
+    getContainer
+  } = props;
+
+  const [tip, setTip] = useState<string>('');
+  const [hasError, setHasError] = useState<boolean>(false);
+  const [hasActive, setHasActive] = useState<boolean>(false);
+  const [selectNodes, setSlectNodes] = useState<any>(() => {
+    if (multiple) {
+      return { 'users': value }
+    } else {
+      if (!value) return { 'users': [] };
+      else return { 'users': [value] }
+    }
+  });
+
+  useEffect(() => {
+    let userValue: any = value;
+    // 单选时，传入是单个节点，要处理成数组
+    if (!multiple) {
+      if (!value) userValue = []
+      else userValue = [value];
+    };
+    setSlectNodes({ 'users': userValue });
+  }, [value])
+
+  const onUserSelectHandler = data => {
+    setHasActive(false);
+    setHasError(false);
+    setTip('');
+    let users: any = [];
+    if (multiple) {
+      users = data.users;
+    } else {
+      users = [data[0].data];
+    }
+    if (maxSize != undefined && users && users.length > maxSize) {
+      setHasError(true);
+      setTip(`最多可设置${maxSize}人`);
+    }
+    setSlectNodes({ users });
+    if (multiple) {
+      onChange(users);
+    } else {
+      onChange(users[0]);
+    }
+  }
+
+  const verifing = (): Error[] => {
+    if (maxSize != undefined && selectNodes.users.length > maxSize) {
+      const tip = `最多可设置${maxSize}人`;
+      setHasError(true);
+      setTip(tip);
+      return [{ name, tip }];
+    }
+    return [];
+  }
+
+  const onPopupVisibleChangeHandler = visible => {
+    setHasActive(false);
+    setHasError(false);
+    if (visible) {
+      const errors = verifing();
+      if (errors.length) {
+        setHasError(true);
+      }
+      setHasActive(true);
+    }
+  }
+
+  const onClearHandler = () => {
+    if (multiple) {
+      onChange([]);
+    } else {
+      onChange(undefined);
+    }
+  }
+
+  const onCancelHandler = () => {
+    setHasActive(false);
+  }
+
+  useImperativeHandle(ref, () => ({
+    verifing
+  }))
+
+  return <div className={classNames(preCls)}>
+    <div className={classNames(`${preCls}__label`)}>
+      <span className={classNames(`${preCls}__label-text`)}>{label}</span>
+      {require && <span className={classNames(`${preCls}__label-require`)}>*</span>}
+    </div>
+    <div className={classNames(`${preCls}__border`, {
+      [`${preCls}__border--error`]: hasError,
+      [`${preCls}__border--active`]: hasActive
+    })}>
+      <ErrorToolTip
+        placement={'topLeft'}
+        destroyTooltipOnHide={true}
+        visible={(hasActive || hasError) && tip}
+        overlay={<OverlayInner hasActive={hasActive} hasError={hasError} tip={tip} />}
+        getTooltipContainer={getContainer}
+      >
+        <UserSelector           multiple={multiple}
+          selectNodes={selectNodes}
+          position='centerRight'
+          onOk={onUserSelectHandler}
+          onCancel={onCancelHandler}
+          onSelect={onUserSelectHandler}
+          disabledDepartSelect={true}
+          panes={{ 'depart': true, 'group': false }}
+          onPopupVisibleChange={onPopupVisibleChangeHandler}
+        >
+          <UserInput users={selectNodes.users} onClear={onClearHandler} placeholder={placeholder} />
+        </UserSelector>
+      </ErrorToolTip>
+    </div>
+  </div>
+})

package/src/components/form/form-fields/user/user-input.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import classNames from 'classnames';
+import Avatar from '../../../avatar/default';
+import Tooltip from '../../../tooltip';
+import './index.scss';
+
+interface Props {
+  users?: any;
+  placeholder?: string;
+  onClear: Function;
+}
+
+const preCls = 'form-field-user';
+
+export default (props: Props) => {
+  const { users, placeholder = '请选择', onClear } = props;
+  const userNames: any = [];
+
+  (users || []).forEach(user => {
+    userNames.push(
+      <span className={classNames(`${preCls}__input-avatar`)}>
+        <Tooltip overlay={user.name} placement="top">
+          <Avatar
+            name={user.name}
+            src={user.avatar.small}
+            color={user.avatar.color}
+            userId={user.userId}
+          />
+        </Tooltip>
+      </span>
+    );
+  });
+
+  const onHandleClear = e => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClear();
+  }
+
+  return <div className={classNames(`${preCls}__input`)}>
+    {(!users || !users.length) ?
+      <span className={classNames(`${preCls}__input--placeholder`)}>{placeholder}</span> :
+      userNames
+    }
+    {(users && users.length > 0) && <span className={classNames(`tu-icon-cross ${preCls}__input--clear`)} onClick={onHandleClear}></span>}
+    <span className={classNames(`${preCls}__input--down tu-icon-sort-down`)}></span>
+  </div>
+}

package/src/components/form/index.scss

@@ -0,0 +1,2 @@
+.titaui-form {
+}

package/src/components/form/index.tsx

@@ -0,0 +1,107 @@
+import React, { useRef, forwardRef, useImperativeHandle } from "react";
+import classNames from "classnames";
+import _FormFieldInput from "./form-fields/input";
+import _FormFieldDepartment from "./form-fields/department";
+import _FormFieldUser from "./form-fields/user";
+import _FormFieldDuties from "./form-fields/duties";
+import _FormFieldTextarea from "./form-fields/textarea";
+import _FormFieldRadios from "./form-fields/radios";
+import _FormFieldDropDown from "./form-fields/dropdown";
+import _FormFieldGroup from "./form-fields/group";
+import { SingleLayout } from "./layout";
+import "./index.scss";
+
+const preCls = "titaui-form";
+
+interface Props {
+  children: any;
+  onFieldsChange?: Function;
+  getFormContainer?: Function;
+  className?: string;
+  direction?: "horizontal" | "vertical";
+}
+
+const Form =  forwardRef((props: Props, ref) => {
+  const {
+    children,
+    onFieldsChange,
+    getFormContainer,
+    direction = "vertical",
+    className = "",
+  } = props;
+
+  const fieldsValue = useRef<any>({});
+  const fieldRefs = useRef<any>({});
+
+  const onFieldChangeHandler = (name, value) => {
+    fieldsValue.current[name] = value;
+    onFieldsChange && onFieldsChange(fieldsValue.current);
+  };
+
+  const initFieldsValue = (name, value) => {
+    fieldsValue.current[name] = value;
+  };
+
+  const onStoreRef = (name, ref) => {
+    fieldRefs.current[name] = ref;
+  };
+
+  const getContainer = () => {
+    if (getFormContainer) return getFormContainer();
+    return window.document.body;
+  };
+
+  useImperativeHandle(ref, () => ({
+    verifing: (opts) => {
+      const { onlyFirstError } = opts || {};
+      let errors = [];
+      const fieldsKeys = Object.keys(fieldRefs.current);
+      for (let i = 0; i < fieldsKeys.length; i++) {
+        const fieldRef = fieldRefs.current[fieldsKeys[i]];
+        let fieldErrors = fieldRef.verifing();
+        if (fieldErrors && fieldErrors.length) {
+          errors = errors.concat(fieldErrors);
+          if (onlyFirstError) {
+            break;
+          }
+        }
+      }
+      return errors;
+    },
+  }));
+
+  return (
+    <div className={classNames(preCls, className)}>
+      {React.Children.map(children, (child) => {
+        const { name, value } = child.props;
+        initFieldsValue(name, value);
+        return (
+          <SingleLayout>
+            {React.cloneElement(child, {
+              ref: (ref) => onStoreRef(name, ref),
+              onChange: (value) => onFieldChangeHandler(name, value),
+              getContainer: getContainer,
+              direction,
+              ...child.props,
+            })}
+          </SingleLayout>
+        );
+      })}
+    </div>
+  );
+});
+
+const FormFields = {
+  Input: _FormFieldInput,
+  Department: _FormFieldDepartment,
+  User: _FormFieldUser,
+  Duties: _FormFieldDuties,
+  Textarea: _FormFieldTextarea,
+  Radios: _FormFieldRadios,
+  DropDown:_FormFieldDropDown,
+  GroupFields:_FormFieldGroup,
+};
+//@ts-ignore
+Form.Fields = FormFields
+
+export default Form as typeof Form & {Fields:typeof FormFields}

package/src/components/form/layout/index.scss

@@ -0,0 +1,7 @@
+
+.titaui-form-field {
+  margin-top: 16px;
+  &:first-child {
+    margin-top: 0;
+  }
+}

package/src/components/form/layout/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import classNames from 'classnames';
+import './index.scss';
+
+const preCls = 'titaui-form-field'
+
+export const SingleLayout = props => {
+  const { children } = props;
+  return <div className={classNames(preCls)}>
+    {children}
+  </div>
+}

package/src/components/grid-layout/commen-components/advize.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+interface Props {
+  styles?: React.CSSProperties;
+  children: any;
+  link: string;
+}
+
+export default function Advice(props: Props) {
+  const { styles, children, link } = props
+  return (
+    <div className="grid-component-advice" style={styles}>
+      <a href={link} target="_blank" className="grid-component-advice--link"
+      >{children}</a>
+    </div>
+  )
+}

package/src/components/grid-layout/commen-components/card-contain.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+
+interface Props {
+  styles?: any;
+  children: any;
+  _className?: string;
+}
+
+export default function CardContainer(props: Props) {
+  const { children, styles, _className } = props
+  return <div className={`grid-component-card-container ${_className}`} style={styles}>
+    {children}
+  </div>
+}

package/src/components/grid-layout/commen-components/card-title.tsx

@@ -0,0 +1,30 @@
+import React, { useRef } from 'react'
+import Tooltip from '../../tooltip'
+
+interface Props {
+  content: string;
+  iconUrl: string;
+  tips?: string;
+  children?: any;
+}
+
+
+export default function CardTitle(props: Props) {
+  const { content, iconUrl, tips, children } = props
+
+  const imgTipsRef = useRef<any>()
+
+  return (
+    <div className="grid-component-card-title" ref={imgTipsRef}>
+      <img src={iconUrl} className="grid-component-card-title__icon1" />
+      <span className="grid-component-card-title__content">{content}</span>
+      {tips &&
+        <Tooltip overlay={tips} placement="bottom" getTooltipContainer={() => imgTipsRef.current}>
+          <img src={require('../image/tips-i.png')} className="grid-component-card-title__icon2" />
+        </Tooltip>
+      }
+      {children}
+    </div>
+  )
+
+}

package/src/components/grid-layout/commen-components/carditem-flexcontent.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+
+interface Props {
+  children?: any;
+  styles?: React.CSSProperties;
+  preCls?: string;
+}
+
+export default function CardFlexContent(props: Props) {
+  const { children, styles, preCls } = props
+  return <div className={`grid-component-card-flexContent ${preCls}`} style={styles}>
+    {children}
+  </div>
+}

package/src/components/grid-layout/commen-components/data-item.tsx

@@ -0,0 +1,48 @@
+import React, { useRef } from 'react';
+import Tooltip from '../../tooltip'
+
+interface Props {
+  label: string;
+  num: number;
+  Qtips?: string;
+  updataNum?: number;
+  numColor: string;
+  handleDataClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+
+
+const DataItem = (props: Props) => {
+  const { label, num, Qtips, updataNum = 0,
+    numColor, handleDataClick } = props
+
+  const toolTipsRef = useRef<any>()
+
+  return (
+    <div className={`grid-component-dataItem ${handleDataClick && 'grid-component-dataItem--hadDig'}`}
+      onClick={handleDataClick}
+      ref={toolTipsRef}
+    >
+      <div className="grid-component-dataItem__num" style={{ color: numColor }} >
+        {num}
+      </div>
+      {
+        updataNum !== 0 &&
+        <Tooltip overlay={`本周新增+${updataNum}`} placement="top" getTooltipContainer={() => toolTipsRef.current.parentNode}>
+          <span className="grid-component-dataItem__updataNum">+{updataNum}</span>
+        </Tooltip>
+      }
+      <div className="grid-component-dataItem__content" >
+        {label}
+        {Qtips &&
+          <Tooltip overlay={Qtips} placement='bottom' getTooltipContainer={() => toolTipsRef.current.parentNode}>
+            <img className="grid-component-dataItem__img" src={require('../image/question.png')} />
+          </Tooltip>
+        }
+      </div>
+
+    </div >
+  )
+}
+
+
+export default DataItem