@titaui/pc 1.7.100 → 1.8.2

package/src/pages/personal-info/components/base-info/index.tsx

@@ -1,9 +1,8 @@
 import React, { FC, useState, useRef, useEffect } from "react";
-import { RectBtn } from "../../../../components/button";
 import Form from "../../../../components/form";
-import { getUserInfoFun, saveUserInfo } from "../../request-api";
+import { getUserInfoFun } from "../../request-api";
 import { getLocale } from "../../../../utils/getLocale";
-import Toast from "../../../../components/toast";
+import EditModle from '../edit-info'
 import "./index.scss";
 
 const {Fields} = Form
@@ -12,129 +11,59 @@ const prefix = "titaui-personal-info-base-info";
 const BaseInfo: FC = () => {
   const formRef = useRef<any>();
   const [userInfo, setUserInfo] = useState({ name: "", email: "", mobile: "" });
-  const [isDisable, setIsDisable] = useState(false);
-  const [isEdit, setIsEdit] = useState(false);
+  const [visible, setVisible] = useState(false);
 
-  const handleSaveInfo = () => {
-    //校验
-    const err = formRef.current.verifing({ truonlyFirstErrore: false });
-    if (err.length > 0) {
-      return;
-    } else {
-      saveUserInfo({ data: userInfo }).then((resp) => {
-        if (resp.Code === 1) {
-          Toast.Success(getLocale('Per_Ma_form_Updatesuc'), { canClose: false });
-        } else {
-          Toast.Error(resp.Message, { canClose: false });
-        }
-      });
-    }
-  };
+  const handleClickEdit = () => {
+    setVisible(true);
+  }
 
-  const handleNameChange = (value) => {
-    setUserInfo({
-      ...userInfo,
-      name: value || "",
-    });
-    setIsEdit(true);
-  };
-
-  const handlePhoneChange = (value) => {
-    setUserInfo({
-      ...userInfo,
-      mobile: value || "",
-    });
-    setIsEdit(true);
-  };
-
-  const handleEmailChange = (value) => {
-    setUserInfo({
-      ...userInfo,
-      email: value || "",
-    });
-    setIsEdit(true);
-  };
-
-  useEffect(() => {
-    getUserInfoFun().then((resp) => {
-      if (resp.Code === 1 && resp.Data) {
-        setUserInfo({...resp.Data, position: resp.Data.positionCode});
-      }
-    });
-  }, []);
+  const handleCancelEdit = () => {
+    setVisible(false);
+  }
 
   useEffect(() => {
-    if (userInfo.name && userInfo.mobile && isEdit) {
-      setIsDisable(false);
-    } else {
-      setIsDisable(true);
-    }
-  }, [userInfo, isEdit]);
+		getUserInfoFun().then((resp) => {
+			if (resp.Code === 1 && resp.Data) {
+				setUserInfo({ ...resp.Data, position: resp.Data.positionCode });
+			}
+		});
+	}, []);
 
   return (
     <div className={prefix}>
       <div className={`${prefix}__header`}>
         <span className={`${prefix}__header-title`}>{getLocale('Per_Ass_New_title_text_BasicIn')}</span>
-        <RectBtn
-          type={"primary"}
-          text={getLocale('Mod_Save')}
-          disabled={isDisable}
-          onClick={handleSaveInfo}
-        />
+        <span className={`${prefix}__header-btn`} onClick={handleClickEdit}>{getLocale('Mod_Editor')}</span>
+        <EditModle visible={visible} onCancel={handleCancelEdit}/>
       </div>
       <div className={`${prefix}__form`}>
         <Form ref={formRef}>
           <Fields.Input
             name="name"
             label={getLocale('Mod_UserName')}
-            placeholder={"请输入姓名"}
+            placeholder={"未设置"}
             type="text"
-            require
-            verifies={[
-              {
-                "tip": "姓名不能为空",
-                "test": /\S/,
-              },
-              {
-                "tip": "姓名只能为中文，英文字母和数字及下划线的组合",
-                "test": /^((?!(\uff08|\uff09)).)*$/g,
-              },
-            ]}
+            verifies={[]}
             value={userInfo.name}
-            onChange={handleNameChange}
+            disabled
           />
           <Fields.Input
             name="phone"
             type="text"
             label={"手机号码"}
-            placeholder={"请输入联系手机号码"}
-            require
+            placeholder={"未设置"}
             value={userInfo.mobile}
-            verifies={[
-              {
-                "tip": "手机号不能为空",
-                "test": /^[\s\S]+$/,
-              },
-              {
-                "tip": "请输入11位手机号",
-                "test": /^1[3456789]\d{9}$/,
-              },
-            ]}
-            onChange={handlePhoneChange}
+            verifies={[]}
+            disabled
           />
           <Fields.Input
             name="email"
             type="text"
             label={"电子邮箱"}
             value={userInfo.email}
-            placeholder={"请输入联系邮箱"}
-            verifies={[
-              {
-                "tip": "邮箱格式错误",
-                "test": /^([a-zA-Z0-9_-]|\.)+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
-              },
-            ]}
-            onChange={handleEmailChange}
+            placeholder={"未设置"}
+            verifies={[]}
+            disabled
           />
         </Form>
       </div>

package/src/pages/personal-info/components/edit-info/index.tsx

@@ -0,0 +1,152 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { getUserInfoFun, saveUserInfo } from '../../request-api';
+import Toast from '../../../../components/toast';
+import Input from './input';
+import Dialog from '../../../../components/dialog';
+
+const EditBaseInfo = (props) => {
+	const { visible, onCancel } = props;
+
+	const modalRef = useRef<any>();
+
+	const [ isDisable, setIsDisable ] = useState(false);
+	const [ isEdit, setIsEdit ] = useState(false);
+	const [ userInfo, setUserInfo ] = useState({ name: '', email: '', mobile: '' });
+
+	const handleNameChange = (value) => {
+		setUserInfo({
+			...userInfo,
+			name: value || ''
+		});
+		setIsEdit(true);
+	};
+
+	const handlePhoneChange = (value) => {
+		setUserInfo({
+			...userInfo,
+			mobile: value || ''
+		});
+		setIsEdit(true);
+	};
+
+	const handleEmailChange = (value) => {
+		setUserInfo({
+			...userInfo,
+			email: value || ''
+		});
+		setIsEdit(true);
+	};
+
+	const handleSaveUserInfo = () => {
+		if (!userInfo.email || !userInfo.mobile || !userInfo.name || isDisable) {
+      setIsDisable(true);
+			return;
+		} else {
+			saveUserInfo({ data: userInfo }).then((resp) => {
+				if (resp.Code === 1) {
+					Toast.Success('更新成功', { canClose: false });
+          onCancel();
+          setTimeout(() => {
+            window.location.reload();
+          }, 2000)
+				} else {
+					Toast.Error(resp.Message, { canClose: false });
+				}
+			});
+		}
+	};
+
+	useEffect(() => {
+		getUserInfoFun().then((resp) => {
+			if (resp.Code === 1 && resp.Data) {
+				setUserInfo({ ...resp.Data, position: resp.Data.positionCode });
+			}
+		});
+	}, []);
+
+	useEffect(
+		() => {
+			if (userInfo.name && userInfo.mobile && isEdit) {
+				setIsDisable(false);
+			} else {
+				setIsDisable(true);
+			}
+		},
+		[ userInfo, isEdit ]
+	);
+
+	return (
+		<Dialog
+			visible={visible}
+			ref={modalRef}
+			width={480}
+			mask
+			centered
+			title={'基本信息设置'}
+			noHeadLine
+			maskClosable={false}
+			onClose={onCancel}
+			onCancel={onCancel}
+			okText="确定"
+			noFooterLine
+			onOk={handleSaveUserInfo}
+			disabled={isDisable}
+		>
+			<Input
+				name="name"
+				label={'姓名'}
+				placeholder={'请输入姓名'}
+				type="text"
+				require
+				verifies={[
+					{
+						tip: '姓名不能为空',
+						test: /\S/
+					},
+					{
+						tip: '姓名只能为中文，英文字母和数字及下划线的组合',
+						test: /^((?!(\uff08|\uff09)).)*$/g
+					}
+				]}
+				value={userInfo.name}
+				onChange={handleNameChange}
+			/>
+			<Input
+				name="phone"
+				type="text"
+				label={'手机号码'}
+				placeholder={'请输入手机号'}
+				require
+				value={userInfo.mobile}
+				verifies={[
+					{
+						tip: '手机号不能为空',
+						test: /^[\s\S]+$/
+					},
+					{
+						tip: '请输入11位手机号',
+						test: /^1[3456789]\d{9}$/
+					}
+				]}
+				onChange={handlePhoneChange}
+			/>
+			<Input
+				name="email"
+				type="text"
+				label={'邮箱'}
+				value={userInfo.email}
+				require
+				placeholder={'请输入邮箱'}
+				verifies={[
+					{
+						tip: '邮箱格式错误',
+						test: /^([a-zA-Z0-9_-]|\.)+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
+					}
+				]}
+				onChange={handleEmailChange}
+			/>
+		</Dialog>
+	);
+};
+
+export default EditBaseInfo;

package/src/pages/personal-info/components/edit-info/input/index.scss

@@ -0,0 +1,82 @@
+.edit-base-info-input {
+  display: flex;
+  box-sizing: border-box;
+  padding: 0 32px;
+  align-items: center;
+  margin-bottom: 16px;
+  &__label {
+    width: 56px;
+    height: 22px;
+    font-size: 14px;
+    margin-bottom: 5px;
+    margin-right: 20px;
+    font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+    font-weight: 400;
+    line-height: 22px;
+
+    &-text {
+      color: #89919F;
+    }
+
+    &-require {
+      color: red;
+    }
+  }
+
+  &__border {
+    flex:1;
+    padding: 6px 12px;
+    transition: all 0.2s;
+    border: 1px solid #e9ecf0;
+    box-sizing: border-box;
+    border-radius: 8px;
+
+    &--disabled {
+      background-color: #fafafa;
+      cursor: not-allowed;
+      input:disabled {
+        background-color: #fafafa;
+        cursor: not-allowed;
+        color: #3f475594;
+      }
+    }
+  }
+  &__border--error {
+    box-shadow: inset 0px 0px 4px 0px rgba(240, 94, 94, 0.3) !important;
+    border: 1px solid #f05e5e !important;
+  }
+  &__border--active {
+    box-shadow: inset 0px 0px 4px 0px rgba(40, 121, 255, 0.3);
+    border: 1px solid #2879ff;
+  }
+
+  &__input {
+    display: inline-block;
+    padding: 0;
+    width: calc(100% - 12px);
+    font-size: 14px;
+    font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+    font-weight: 400;
+    color: #3f4755;
+    height: 22px;
+    line-height: inherit;
+    border: none;
+
+    &::-webkit-input-placeholder {
+      color: #bfc7d5;
+      font-weight: unset;
+    }
+    &::-moz-placeholder {
+      color: #bfc7d5;
+      font-weight: unset;
+    }
+    &:-moz-placeholder {
+      color: #bfc7d5;
+      font-weight: unset;
+    }
+    &:-ms-input-placeholder {
+      color: #bfc7d5;
+      font-weight: unset;
+    }
+  }
+}

package/src/pages/personal-info/components/edit-info/input/index.tsx

@@ -0,0 +1,145 @@
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+import classNames from 'classnames';
+import ToolTip from '../../../../../components/tooltip/error-tip';
+import './index.scss'
+
+const preCls = 'edit-base-info-input';
+
+interface verify {
+  tip: string;
+  test: RegExp;
+}
+interface Props {
+  label: string;
+  verifies?: verify[];
+  placeholder?: string;
+  onChange?: Function;
+  value?: any;
+  require?: boolean;
+  type?: string;
+  name: string;
+  getContainer?: Function;
+  disabled?: boolean
+}
+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 />;
+}
+
+const popupAlign = {
+  offset: [-12, -4],
+  overflow: { adjustX: true, adjustY: true },
+  targetOffset: [0, 0],
+};
+
+export default forwardRef((props: Props, ref) => {
+  const {
+    label,
+    verifies,
+    placeholder,
+    onChange,
+    require,
+    type,
+    name,
+    disabled,
+    getContainer
+  } = props;
+
+  const inputRef = useRef<any>();
+  const [hasError, setHasError] = useState<boolean>(false);
+  const [hasActive, setHasActive] = useState<boolean>(false);
+  const [tip, setTip] = useState<string>('');
+  const [value, setValue] = useState<string>(props.value || '');
+
+  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>
+    </div>
+    <div className={classNames(`${preCls}__border`, {
+      [`${preCls}__border--error`]: hasError,
+      [`${preCls}__border--active`]: hasActive,
+      [`${preCls}__border--disabled`]: disabled
+    })}>
+      <ToolTip
+        placement={'topLeft'}
+        popupAlign={popupAlign}
+        destroyTooltipOnHide={true}
+        visible={(hasActive || hasError) && tip}
+        overlay={<OverlayInner hasActive={hasActive} hasError={hasError} tip={tip} />}
+        getTooltipContainer={getContainer}
+      >
+        <input
+          ref={inputRef}
+          type={type}
+          disabled={disabled}
+          className={classNames(`${preCls}__input`)}
+          value={value}
+          placeholder={placeholder}
+          onFocus={onInputFocusHandler}
+          onBlur={onBlurHandler}
+          onChange={onChangeHandler}
+          autoComplete='off'
+        />
+      </ToolTip>
+    </div>
+  </div>
+})

package/src/pages/personal-info/components/person-photo/index.scss

@@ -0,0 +1,80 @@
+.titaui-personal-info-person-photo {
+  background: #ffffff;
+  box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
+  border-radius: 12px;
+  padding: 20px 32px;
+  margin-top: 10px;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    &-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #141c28;
+      line-height: 24px;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      &::before {
+        content: "";
+        width: 4px;
+        height: 16px;
+        background: linear-gradient(90deg, #4e90ff 0%, #2879ff 100%);
+        border-radius: 2px;
+        display: inline-block;
+        position: absolute;
+        left: -8px;
+        top: 3px;
+      }
+    }
+  }
+  &__main {
+    display: flex;
+    align-items: center;
+    &-mask {
+      position: absolute;
+      width: 160px;
+      height: 32px;
+      box-sizing: border-box;
+      padding: 7px 52px;
+      background: rgba(20, 28, 40, 0.5);
+      // filter: blur(4px);
+      font-size: 12px;
+      color: #FFFFFF;
+      line-height: 18px;
+    }
+    & > span {
+      margin-left: 24px;
+      font-size: 12px;
+      color: #A4ACB9;
+      line-height: 20px;
+    }
+  }
+  .titaui-pc-avator-container {
+    cursor: pointer;
+  }
+  .titaui-pc-avator-wrapper {
+    &::before {
+      position: absolute;
+      bottom:0;
+      display: block;
+      content: "点击修改";
+      width: 160px;
+      height: 32px;
+      background: rgba(20, 28, 40, 0.5);
+      color: #FFFFFF;
+      font-size: 12px;
+      line-height: 18px;
+      text-align: center;
+      box-sizing: border-box;
+      padding: 7px 0;
+      backdrop-filter: blur(4px);
+    }
+    &:hover::before {
+      background: rgba(20, 28, 40, 0.4);
+    }
+  }
+}

package/src/pages/personal-info/components/person-photo/index.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { getUserInfo } from '../../../../utils/bs-global';
+import Avatar from '../../../../components/avatar';
+import ChangePhotoModal from '../../../../components/upload-photo-modal';
+import './index.scss';
+
+const prefix = 'titaui-personal-info-person-photo';
+
+const { Id, Name, UserAvatar } = getUserInfo();
+
+const PersonPhoto = () => {
+
+  const [visible, setVisible] = useState(false);
+
+  const handleChangePhoto = () => {
+    setVisible(true);
+  }
+
+  const handleCancel = () => {
+    setVisible(false);
+  }
+
+	return (
+		<div className={prefix}>
+			<div className={`${prefix}__header`}>
+				<span className={`${prefix}__header-title`}>上传头像</span>
+			</div>
+			<div className={`${prefix}__main`}>
+				<Avatar
+					userId={Id}
+					name={Name}
+					color={UserAvatar.Color}
+					src={UserAvatar.Large}
+					size={{
+						width: 160,
+						textNum: 1,
+						fontSize: 24
+					}}
+          onClick={handleChangePhoto}
+				/>
+        <span>· 建议图片最小尺寸 150*150px</span>
+			</div>
+      <ChangePhotoModal visible={visible} onCancel={handleCancel} type="person"/>
+    </div>
+	);
+};
+
+export default PersonPhoto;

package/src/pages/personal-info/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import BaseInfo from "./components/base-info";
+import PersonPhoto from './components/person-photo'
 import Aha2021Page from '../aha2021';
 import "./index.scss";
 
@@ -10,6 +11,7 @@ const PersonalInfo = () => {
     <Aha2021Page.ContentTemplate>
       <div className={prefix}>
         <BaseInfo />
+        <PersonPhoto />
       </div>
     </Aha2021Page.ContentTemplate>
   );