这篇文章展示了如何在React应用中实现带图标的多选下拉列表，使用了react-intl-universal库处理国际化，以及如何显示用户头像。代码示例包括下拉列表组件的创建，以及头像生成函数。应用还涉及到了状态管理和路由。
1.下拉列表展示(带图标 多选)
1. 引入react-intl-universal，这个看文档即可； 安装 npm install react-intl-universal
import './App.css';
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
import "@aws-amplify/ui-react/styles.css";
import intl from "react-intl-universal";
import routes from './router/index'
import {useRoutes} from "react-router";
import Demo1 from './router/Demo1';
import StateRoute from './router/StateRoute';
import Count from './redux/demo2/count2';
import {
Bookconsultations,UserBiography
} from './ui-components';
Amplify.configure(awsconfig);
const locales = {
"en" : require("./localize/utils/en.json")
};
function App() {
//设置初始数据
intl.init({
currentLocale : "en",
locales
});
const element=useRoutes(routes)
return (
<div className="App">
<Bookconsultations />
{element}
</div>
);
}
export default App;2.下拉列表展示(带图标 多选)及头像显示
2.1. 下拉列表展示(带图标 多选)
2.2 名称字母显示头像
import { Select, Space, Input } from 'antd';
const { Option } = Select;
export default function Bookconsultations(props) {
const { overrides, ...rest } = props;
const [date, setDate] = useState(new Date());
const [currentUsername, setCurrentUsername] = useState("");
const [timePeriod, setTimePeriod] = useState("");
const [value, setValue] = React.useState([]);
useEffect(() => {
getCurrentUserName()
}, []);
//1.1下拉列表展示(带图标 多选)
const options = [
{
value: intl.get("HEALTH_ISSUE"),
label: intl.get("HEALTH_ISSUE"),
img: <HealthIssue/>,
},
{
value: intl.get("DISABILITY"),
label: intl.get("DISABILITY"),
img: <Disability/>,
},
{
value: intl.get("COVID-19"),
label: intl.get("COVID-19"),
img: <Covid19/>,
},
{
value: intl.get("INCOME"),
label: intl.get("INCOME"),
img: <Income/>,
},
{
value: intl.get("JOBLESS"),
label: intl.get("JOBLESS"),
img: <Jobless/>,
},
{
value: intl.get("NURSING"),
label: intl.get("NURSING"),
img: <Nursing/>,
},
{
value: intl.get("CHILD_CARE"),
label: intl.get("CHILD_CARE"),
img: <Childcare/>,
},
];
//2.根据名称字母显示头像
async function getCurrentUserName() {
// let name = (await Auth.currentAuthenticatedUser()).username;
let name ="test";
// console.log("name->",name);
setCurrentUsername(name);
return name;
}
//2.1字母头像生成
const UserPlaceHolder = ({name}) => {
const userPlaceholder = generatePlaceholderName(name);
const placeholderBackground = `hsl(${generateRandomColorNumber()}, 50% , 50%)`;
if (userPlaceholder != null) {
return (
<div className="user__placeholder" style={{backgroundColor: placeholderBackground}}>
{userPlaceholder}
</div>
);
}
};
const handleChange = (value) => {
console.log(`selected ${value}`);
};
async function addBooks() {
try {
// if (!formState.name || !formState.description) return
// const todo = { ...formState }
const todo = {
yoyakukijitu:"11111",
yoyakujikan:"3:00 AM - 4:00 PM",
danwakeijiki:"2023-03-03"
}
// setTodos([...todos, todo])
// setFormState(initialState)
await API.graphql(graphqlOperation(createBook, {input: todo}))
alert('添加成功')
} catch (err) {
console.log('error creating todo:', err)
alert('添加失败')
}
}
{/*1.3下拉列表展示（带图标 多选）*/}
<Select
mode="multiple"
size= "large"
style={{
width: '589px',
left: "-15px",
fontFamily: "Noto Sans JP",
color: "rgba(117,117,120,1)",
textAlign: "left",
position: "relative"
}}
placeholder={intl.get("SELECT_CONSULTANTS")}
onChange={handleChange}
optionLabelProp="label"
showArrow={true}
>
{
options.map(option => (
<Option value={option.value} label={option.label}>
<Space>
{option.img}
{option.label}
</Space>
</Option>
))
}
</Select>
{/*2.2字母头像展示*/}
{/* <UserPlaceHolder name={currentUsername}/>*/}
{/*2.3图片头像展示*/}
<Image
src={require("../resources/testImg.png")}
objectFit="initial"
objectPosition="50% 50%"
backgroundColor="initial"
height="45px"
width="45px"
opacity="100%"
/>
2.1下拉列表图标 HealthIssue.jsx 其他的类似
import * as React from "react";
import { getOverrideProps } from "@aws-amplify/ui-react/internal";
import { Icon } from "@aws-amplify/ui-react";
export default function HealthIssue(props) {
const { overrides, ...rest } = props;
return (
<Icon
width="24px"
height="24px"
display="block"
gap="unset"
alignItems="unset"
justifyContent="unset"
overflow="hidden"
position="relative"
padding="0px 0px 0px 0px"
viewBox={{ minX: 0, minY: 0, width: 24, height: 24 }}
paths={[
{
d: "M0 8.375C0.383333 5.99167 1.50417 4 3.3625 2.4C5.22083 0.8 7.39167 0 9.875 0C11.125 0 12.3 0.2125 13.4 0.6375C14.5 1.0625 15.4917 1.65 16.375 2.4C16.2083 2.68333 16.0708 2.9375 15.9625 3.1625C15.8542 3.3875 15.7667 3.6 15.7 3.8C14.9333 3.08333 14.0542 2.52083 13.0625 2.1125C12.0708 1.70417 11.0083 1.5 9.875 1.5C8.00833 1.5 6.35 2.03333 4.9 3.1C3.45 4.16667 2.43333 5.53333 1.85 7.2C1.48333 7.28333 1.14167 7.42083 0.825 7.6125C0.508333 7.80417 0.233333 8.05833 0 8.375L0 8.375ZM9.875 20C7.39167 20 5.22083 19.1958 3.3625 17.5875C1.50417 15.9792 0.383333 13.9833 0 11.6C0.216667 11.9333 0.483333 12.2 0.8 12.4C1.11667 12.6 1.46667 12.7417 1.85 12.825C2.43333 14.4917 3.45417 15.8542 4.9125 16.9125C6.37083 17.9708 8.025 18.5 9.875 18.5C12.2417 18.5 14.25 17.6708 15.9 16.0125C17.55 14.3542 18.375 12.35 18.375 10C18.375 9.71667 18.3583 9.43333 18.325 9.15C18.2917 8.86667 18.25 8.58333 18.2 8.3C18.3167 8.33333 18.4292 8.35417 18.5375 8.3625C18.6458 8.37083 18.7583 8.375 18.875 8.375C19.025 8.375 19.1708 8.36667 19.3125 8.35C19.4542 8.33333 19.5917 8.30833 19.725 8.275C19.775 8.55833 19.8125 8.84167 19.8375 9.125C19.8625 9.40833 19.875 9.7 19.875 10C19.875 11.3667 19.6125 12.6583 19.0875 13.875C18.5625 15.0917 17.85 16.1542 16.95 17.0625C16.05 17.9708 14.9917 18.6875 13.775 19.2125C12.5583 19.7375 11.2583 20 9.875 20ZM6.275 9.425L8.2 7.5L6.25 5.55L5.375 6.425L6.45 7.475L5.375 8.55L6.275 9.425ZM18.875 6.875C18.3583 6.875 17.9167 6.69167 17.55 6.325C17.1833 5.95833 17 5.51667 17 5C17 4.56667 17.1125 4.11667 17.3375 3.65C17.5625 3.18333 18.075 2.375 18.875 1.225C19.675 2.375 20.1875 3.18333 20.4125 3.65C20.6375 4.11667 20.75 4.56667 20.75 5C20.75 5.51667 20.5667 5.95833 20.2 6.325C19.8333 6.69167 19.3917 6.875 18.875 6.875ZM13.5 9.45L14.4 8.55L13.325 7.475L14.375 6.425L13.5 5.55L11.55 7.5L13.5 9.45ZM9.875 11.575C9.44167 11.575 9.01667 11.625 8.6 11.725C8.18333 11.825 7.78333 11.975 7.4 12.175L3.75 10.075C3.75 9.80833 3.69167 9.5625 3.575 9.3375C3.45833 9.1125 3.29167 8.93333 3.075 8.8C2.74167 8.61667 2.39167 8.57083 2.025 8.6625C1.65833 8.75417 1.375 8.96667 1.175 9.3C0.991667 9.63333 0.95 9.98333 1.05 10.35C1.15 10.7167 1.36667 11 1.7 11.2C1.93333 11.3333 2.17083 11.3917 2.4125 11.375C2.65417 11.3583 2.89167 11.2833 3.125 11.15L6.25 12.975C5.95 13.2583 5.67917 13.5667 5.4375 13.9C5.19583 14.2333 4.99167 14.6 4.825 15L6.15 15C6.51667 14.3 7.0375 13.7583 7.7125 13.375C8.3875 12.9917 9.11667 12.8 9.9 12.8C10.6833 12.8 11.4042 12.9917 12.0625 13.375C12.7208 13.7583 13.2417 14.3 13.625 15L14.925 15C14.5083 13.9667 13.8417 13.1375 12.925 12.5125C12.0083 11.8875 10.9917 11.575 9.875 11.575Z",
fill: "rgba(26,26,28,1)",
fillRule: "nonzero",
style: { transform: "translate(8.85%, 8.33%)" },
},
]}
{...getOverrideProps(overrides, "HealthIssue")}
{...rest}
></Icon>
);
}
2.1下拉数据
en.json
{
"HOME" : "Home",
"CALENDAR" : "Calendar",
"SETTING" : "Setting",
"CLIENT_RECORDS" : "Client Records",
"OTHER_ORGANISATION_RECORDS" : "Other Organisation Records",
"CLIENT_LIST" : "Client List",
"CREATE_NEW" : "Create New",
"ALL_RECORDS" : "All Records",
"NEW_USERS" : "New Users",
"HIGH_PRIORITY" : "High Priority",
"PENDING" : "Pending",
"CLOSED" : "Closed",
"MORE_FILTERS" : "More Filters",
"LOG_OUT" : "Log Out",
"CHANGE_LANGUAGE" : "Change Japanese",
"TODAY" : "Today",
"THIS_WEEK" : "This Week",
"THIS_MONTH" : "This Month",
"RECORD_NO" : "Record no.",
"CLIENT_NAME" : "Client name",
"INTERACTION_TYPE" : "Interaction type",
"DATE_&_TIME" : "Date & Time",
"DETAILS_OF_CONSULTATION" : "Consultation Details",
"STATUS" : "Status",
"RESPONSE" : "Response",
"ATTACHMENTS" : "Attachments",
"CALL_RECEIVER" : "Call Receiver",
"FILTERS" : "Filters",
"INCOMING_CALL" : "Incoming call",
"OUTGOING_CALL" : "Outgoing call",
"ZOOM_CALL" : "Zoom Call",
"F2F" : "F2F",
"APP" : "App",
"CLOSED/COMPLETED" : "Closed/Completed",
"IN-PROGRESS/PENDING" : "in-Progress/Pending",
"UNREAD/TODO" : "Unread/Todo",
"HEALTH_ISSUE" : "Health Issue",
"COVID-19" : "Covid-19",
"JOBLESS" : "Jobless",
"CHILD_CARE" : "Child Care",
"LOAN" : "Loan",
"PARENTING" : "Parenting",
"DISABILITY" : "Disability",
"INCOME" : "Income",
"NURSING" : "Nursing",
"HOUSE_RENT" : "House Rent",
"WORK_RELATED_ISSUES" : "Work Related Issues",
"HOUSE_PAYMENT" : "House Payment",
"CLEAR_ALL" : "Clear All",
"SHOW_19_RECORDS" : "Show 19 Records",
"HOUSE" : "House",
"TAX/PUBLIC_FEES" : "Tax/Public fees",
"DEBT" : "Debt",
"RELATIONSHIP_WITH_COMMUNITY" : "Relationship With Community",
"RELATIONSHIP_WITH_FAMILY" : "Relationship With Family",
"SHUT-IN" : "Shut-in",
"DOMESTIC_VIOLENCE" : "Domestic Violence",
"FOOD" : "Food",
"OTHERS" : "Others",
"SUPPORT_PHASE" : "Support Phase",
"SUBSIDIES" : "Subsidies",
"RECORDS" : "Records",
"DOCUMENTS" : "Documents",
"CONSULTATION_(PHASE_1)" : "Consultation (Phase 1)",
"CLIENT_DETAILS" : "Client Details",
"ASSESSMENT_FORM" : "Assessment Form",
"SOLUTION_PLAN_(PHASE_2)" : "Solution Plan (Phase 2)",
"IMPLEMENTATION_(PHASE_3)" : "Implementation (Phase 3)",
"MONITOR_(PHASE_4)" : "Monitor (Phase 4)",
"CURRENT_STATUS" : "Current Status",
"TAP_HERE_TO_SET_CONSULTATION_AS_A_HIGH_PRIORITY." : "Tap here to set consultation as a high priority.",
"PROGRESS_STATUS" : "Progress Status",
"NEED_TO_ADD_MORE_DETAILS." : "Need to add more details.",
"SCHEDULE_APPOINTMENT" : "Schedule Appointment",
"SCHEDULE" : "Schedule",
"ID_PROOF" : "ID Proof",
"PERSONAL_DETAILS" : "Personal details",
"CONTACT_DETAILS" : "Contact Details",
"NAME_(KANJI)" : "Name (Kanji)",
"NAME_(KANA)" : "Name (Kana)",
"FAMILY_NAME" : "Family name",
"GIVEN_NAME" : "Given name",
"GENDER" : "Gender",
"DATE_OF_BIRTH" : "Date of Birth",
"CONTACT_DETAILS" : "Contact details",
"PHONE_NUMBER" : "Phone number",
"E-MAIL" : "E-mail",
"ADDRESS" : "Address",
"EMAIL_ADDRESS" : "Email Address",
"MORE_DETAILS" : "More details",
"HELP_TOPIC" : "Help topic",
"PERSON_IN_CHARGE" : "Person in charge",
"PRIOR_CONSULTATION" : "Prior consultation",
"NEED_SOLUTION" : "Need solution",
"INTERESTS" : "Interests",
"CONTACT_ROUTE" : "Contact route",
"PROBLEM_STATEMENT" : "Problem statement",
"OTHER_ORGANISATION_DETAILS_(IF_ANY)" : "Other Organisation details (if any)",
"ORGANISATION_NAME" : "Organisation Name",
"ORGANISATION_CATEGORY" : "Organisation Category",
"DETAILS" : "Details",
"PERSON_IN_CHARGE_DETAILS_(IF_NOT_SELF)" : "Person in Charge details (if not self)",
"RELATIONSHIP" : "Relationship",
"SAVE_AS_DRAFT" : "Save As Draft",
"CONTINUE" : "Continue",
"FAMILY" : "Family",
"MONEY" : "Money",
"HEALTH" : "Health",
"WORK" : "Work",
"ISSUES_&_GOALS" : "Issues & Goals",
"WORK_INCOME_JPY/MONTH" : "Work income JPY/Month",
"PENSION" : "Pension",
"AID_BY_FAMILY" : "Aid by family",
"SAVINGS" : "Savings",
"PUBLIC_ALLOWANCE" : "Public Allowance",
"MONEY_IN-HAND" : "Money in-hand",
"ARREARS" : "Arrears",
"DEPARTMENT" : "Department",
"OTHER" : "Other",
"CONSULTATION_MEMOS" : "Consultation Memos",
"UPLOAD_OCR_MATERIAL" : "Upload OCR Material",
"WRITE_SELF_RELIANCE_NOTES" : "Write Self Reliance Notes",
"FAMILY_TREE" : "Family Tree",
"SUMMARY_NOTES" : "Summary Notes",
"WRITE_SUMMARY_IN_POINTERS" : "Write Summary In Pointers",
"NEXT_STEPS_(RESPONSE)" : "Next steps (response)",
"BOOK_APPOINTMENT" : "Book Appointment",
"CALL_BACK" : "Call back",
"WRITE_TEXT_HERE..." : "Write text here...",
"NOTIFY_&_SHARE_NOTES_WITH_NEEDY_PERSON" : "Notify & share notes with needy person",
"CANCEL" : "Cancel",
"DONE" : "Done",
"CORONA" : "Corona",
"DISASTER" : "Disaster",
"RESIDENCE" : "Residence",
"SUPPORT_TYPE" : "Support type",
"EXEMPTION/INTEREST_DISCOUNT" : "Exemption/interest discount",
"LOAN/MAX_CAPITAL" : "Loan/Max Capital",
"ALLOWANCE/SUBSIDY_ETC" : "Allowance/Subsidy etc",
"CONSULTATION" : "Consultation",
"SUPPORT_SERVICES" : "Support services",
"TARGET_AUDIENCE" : "Target audience",
"RAISING_CHILDREN" : "Raising children",
"SUBSIDY" : "Subsidy",
"SEARCH_SUBSIDY_BY_TITLE,_CATEGORY_OR_DETAIL" : "Search subsidy by title, category or detail",
"SUBSIDY_NAME" : "Subsidy Name",
"LAST_UPDATED" : "Last updated",
"AGO" : "ago",
"HEALTH_ISSUES" : "Health Issues",
"PLAN" : "Plan",
"POLICY" : "Policy",
"SOLUTION_PLAN" : "Solution Plan",
"SUBSIDY_DETAILS" : "Subsidy Details",
"MERITS_&_DEMERITS" : "Merits & Demerits",
"PROPOSED_SUBSIDIES" : "Proposed Subsidies",
"ADD_SUBSIDY" : "Add Subsidy",
"SEARCH_ON_WEB" : "Search On Web",
"SHOW_EXAMPLES" : "Show examples",
"MERITS" : "Merits",
"WRITE_MERITES_HERE" : "Write Merites Here",
"DEMERITS" : "Demerits",
"WRITE_DEMERITS_HERE" : "Write Demerits Here",
"SEND_FOR_APPROVAL" : "Send for approval",
"APPLICATION_FORM" : "Application Form",
"CLIENT_ID" : "Client ID",
"CONSULTANT" : "Consultant",
"DATE_OF_PLAN_CREATION" : "Date of plan creation",
"ISSUES" : "Issues",
"WRITE_ISSUES_YOU_WANT_TO_RESOLVE" : "Write Issues You Want To Resolve",
"VIEW_MATERIALS" : "View materials",
"LONG_TERM_GOALS" : "Long Term Goals",
"WRITE_LONG_TERM_GOALS_HERE" : "Write Long Term Goals Here",
"SHORT_TERM_GOALS" : "Short Term Goals",
"WRITE_SHORT_TERM_GOALS_HERE" : "Write Short Term Goals Here",
"RECOMMENDED_SUPPORT_PLAN" : "Recommended Support Plan",
"OTHER_SUPPORT_PLAN" : "Other Support Plan",
"PROJECT_BASED_ON_LAWS" : "Project based on laws",
"SELECT" : "Select",
"OTHER_RELATED_PROJECTS" : "Other related projects",
"MONITORING_PLAN" : "Monitoring Plan",
"PERIOD_OF_PLAN" : "Period of plan",
"PLAN_DATE" : "Plan date",
"SCHEDULE_SUPPORT_COORDINATION_MEETING" : "Schedule Support Coordination Meeting",
"SCHEDULE_MEETING" : "Schedule meeting",
"REMARK" : "Remark",
"WRITE_HERE" : "Write Here",
"ACCEPT_FILE_JPG._PNG._PDF._UPTO_15MB" : "Accept file jpg. png. pdf. Upto 15MB",
"SUSPEND_BEFORE_SUPPORT" : "Suspend before support",
"SELECT_SUPPORT_ORGANISATION" : "Select support organisation",
"SELECT_SUPPORT_PERSON" : "Select support person",
"SIGNATURE" : "Signature",
"SIGN_HERE" : "Sign Here",
"EVALUATION_FORM" : "Evaluation Form",
"FEEDBACK/QUESTIONAIRE" : "Feedback/Questionaire",
"GOAL_ACHEIVEMENT" : "Goal Acheivement",
"WRITE_TEXT_HERE" : "Write Text Here",
"OBSERVED_CHANGES" : "Observed changes",
"ISSUES_&_CHARACTERISTICS_AT_THE_TIME_OF_FIRST_INTERVIEW_&_DURING_THE_SUPPORT" : "Issues & Characteristics At The time OF First Interview & During The Support",
"STATUS_RESPONSES_TO_ISSUES_AND_CHARACTERISTICS" : "Status Responses To Issues And Characteristics",
"CURRENT_SITUATION_AND_REMAINING_ISSUES" : "Current Situation And Remaining Issues",
"CHOOSE_THE_EVALUATION_DATE" : "Choose The Evaluation Date",
"SELECT_EVALUATION_DATE" : "Select Evaluation Date",
"OTHER_SUPPORT_PLANS" : "Other support plans",
"PERSONAL_WISHES_AND_STAFF_OPINIONS_REGARDING_THE_TERMINATION/CONTINUATION" : "Personal Wishes And Staff Opinions Regarding The Termination/Continuation",
"IMPLEMENTATION_OF_EVALUATION_AT_THE_SUPPORT_COORDINATION_MEETING" : "Implementation Of Evaluation At The Support Coordination Meeting",
"RESPONSE_AFTER_TERMINATION/POINTS_TO_NOTE_WHEN_RE-PLANNING" : "Response After Termination/Points To Note When Re-Planning",
"INSTITUTION_OF_THE_DESTINATION_WHEN_THE_CONNECTION_IS_CHECKED_AS_YES_AT_THE_END" : "Institution of the destination when the connection is checked as \"Yes\" at the end",
"SPECIAL_NOTES" : "Special Notes",
"STATUS_OF_CONNECTION_TO_PUBLIC_ASSISTANCE" : "Status Of Connection To Public Assistance",
"ATTACHMENTS(OPTIONAL)" : "Attachments(Optional)",
"WEB_APP" : "Web App",
"REGISTERED" : "Registered",
"ADDED_PERSONAL_DETAILS." : "Added personal details.",
"SOLUTION(PHASE_2)" : "Solution(Phase 2)",
"ADDED_MORE_DETAILLS." : "Added more detaills.",
"UPLOADED_ID_CARD." : "Uploaded ID Card.",
"FACE_TO_FACE" : "Face to Face",
"CONSULTATION_MEMO" : "Consultation memo",
"UPLOAD_FAMILY_TREE." : "Upload family tree.",
"SUMMARY_NOTES." : "Summary notes.",
"ZOOM_MEETING" : "Zoom Meeting",
"STAKEHOLDER_MEETING." : "Stakeholder meeting.",
"SUPPORT_PLAN_DISCUSSION." : "Support plan discussion.",
"SUPPORT_POLICY_DISCUSSION." : "Support policy discussion.",
"MEETING_MATERIAL." : "Meeting material.",
"INTERACTION_HISTORY" : "Interaction History",
"FAMILY_BUDGET" : "Family Budget",
"WORK_INCOME" : "Work Income",
"MONEY_IN_HAND" : "Money in hand",
"DEPT" : "Dept",
"SUMMARY_NOTES_DETAILED" : "Summary Notes Detailed",
"NEXT_STEP_(RESPONSE)" : "Next Step (Response)",
"ID_CARD" : "ID Card",
"MY_NUMBER_CARD_HELPS_AUTOMATICALLY" : "My number card helps automatically fill in your basic information.",
"SCAN_MY_NUMBER_CARD" : "Scan My number card",
"VERIFY_THAT_IT_WAS_THE_SAME" : "Verify that it was the same as the one on your government-issued identification.",
"MALE" : "Male",
"FEMALE" : "Female",
"POSTAL_CODE" : "Postal Code",
"STATE" : "State",
"CITY" : "City",
"ADDRESS_1" : "Address 1",
"ADDRESS_2" : "Address 2",
"BY_SELECTING_AGREE_AND_CONTINUE" : "By selecting Agree and continue, I agree to muncipility Terms if service, Payments of Services and Nondiscrimination Policy and acknowledge the Privacy Policy.",
"PERSONAL_INFO" : "Personal Info",
"BACK" : "Back",
"PROGRESS_RECORDS" : "Progress records",
"ADD_MORE_DETAILS_TO_GET_A_FASTER_CONSULTATION" : "Add More details to get a faster consultation",
"CONSULTATION_ORGANISATION" : "Consultation Organisation",
"DETAILS_QUESTION_1" : "1. What kind of help do you need?",
"DETAILS_QUESTION_2" : "2. Who is in the need?",
"DETAILS_QUESTION_3" : "3. Have you taken consulted earlier?",
"DETAILS_QUESTION_4" : "4. Which solutions will be helpful?",
"DETAILS_QUESTION_5" : "5. What are your interests?",
"DETAILS_QUESTION_6" : "6. Tell Us Your Concern In Detail",
"DETAILS_QUESTION_7" : "7. How did you learn about us?",
"WRITE_YOUR_INTERESTS" : "Write Your Interests",
"WRITE_YOUR_CONCERN_HERE" : "Write Your Concern Here...",
"NAME_OF_THE_ORGANISATION" : "Name of the Organisation",
"CATEGORY_OF_THE_NEED" : "Category of the Need",
"ENTER_PHONE_NUMBER" : "Enter phone number",
"PERSON_IN-CHARGE" : "Person in-charge",
"ENTER_PERSON_IN-CHARGE" : "Enter name of Person in-charge",
"SUMMARY" : "Summary",
"WRITE_SUMMARY_OF_THE_DISCUSSION" : "Write summary of the discussion...",
"REQUIRED" : "Required",
"ATTACH_DOCUMENTS" : "Attach Documents",
"IF_YOU_HAVE_DIFFICULTY_ENTERING_TEXT_MANUALLY" : "If you have difficulty entering text manually, we recommend that you use voice input.",
"SALARY_SLIP" : "Salary slip",
"BANK_BOOK" : "Bank Book",
"UPLOAD_SALARY_SLIP" : "Upload Salary Slip",
"UPLOAD_BANK_BOOK" : "Upload Bank Book",
"SUBMIT" : "Submit",
"SKIP_&_SUBMIT" : "Skip & Submit",
"PROFILE_CREATED_SUCCESSFULLY" : "Profile created successfully!",
"GO_TO_RECORD_LIST" : "Go To Record List",
"BOOK_CONSULATION" : "Book Consulation",
"SELECT_ITEM" : "Select Item",
"SELECT_DATE_&_TIME" : "Select date & time",
"SELECT_TIME" : "Select TIme",
"SCHEDULE_MEETINGS" : "Schedule Meetings",
"BOOK_APPOINTMENT" : "Book Appointment",
"MEETING_TITLE" : "Meeting Title",
"TOPIC_OF_CONSULTATION" : "Topic of consultation",
"ADD_PREFERENCES" : "Add Preferences",
"MODE_OF_MEETING" : "Mode of Meeting",
"PHONE_CALL" : "Phone Call",
"SELECT_PREFERED_CONSULTANT" : "Select Preferred Consultant",
"FUTRUE_SCOPE" : "Future Scope",
"WRITE_MEETING_AGENDA" : "Write meeting agenda",
"SELECT_CONSULTANTS" : "Select Consultants"
}2.1结果展示
2.2 名称字母显示头像
引入生成头像工具类
import React, { useEffect, useState,useRef } from "react";
import { Amplify, API, graphqlOperation,Auth } from 'aws-amplify';
import { createTodo, createBook } from '../graphql/mutations'
import { listDashboards, getNeedyPeople, listNeedyPeople } from '../graphql/queries';
// 生成头像工具类
import { generatePlaceholderName, generateRandomColorNumber } from "../utils/utils2";
import { Flex, Icon, Image, Text, View,Pagination, Menu, Divider,Button,TextField,SelectField,
FieldGroupIcon,
FieldGroupIconButton,
MenuItem,MenuButton
} from "@aws-amplify/ui-react";
import "../resources/cusStyle.css";
import Calendar from 'react-calendar';
//import 'react-calendar/dist/Calendar.css';
import "../resources/Calendar.css";
import {testImg} from "../resources/testImg.png";utils2.jsx
export function generateRandomColorNumber() {
let randomHue = Math.floor(Math.random() * 360);
return randomHue;
}
export function generatePlaceholderName(name) {
let splitUsername = name.split(" "),
firstLetter = splitUsername[0]?.[0] ?? "";
return `${firstLetter}`;
}
/* Date control */
export function getCurrentDateForToday(){
let currentDate = new Date();
let year = currentDate.getFullYear(),
month = currentDate.getMonth() + 1,
day = currentDate.getDate()
return this.dateFomatterForDB(year, month, day);
}
export function getFristDateInCurrentMonth(){
let currentDate = new Date();
let year = currentDate.getFullYear(),
month = currentDate.getMonth() + 1
return this.dateFomatterForDB(year, month, "1");
}
export function getLastDateInCurrentMonth(){
let currentDate = new Date();
let year = currentDate.getFullYear(),
month = currentDate.getMonth() + 1,
day = new Date(year, month, 0).getDate()
return this.dateFomatterForDB(year, month, day);
}
export function getFristDateInCurrentWeek(){
let currentDate = new Date()
let fristDateForWeek = new Date(new Date(currentDate).getTime() - (3600*1000*24*(new Date(currentDate).getDay() === 0 ? 6 :new Date(currentDate).getDay()-1)))
let year = fristDateForWeek.getFullYear(),
month = fristDateForWeek.getMonth() + 1,
day = fristDateForWeek.getDate()
return this.dateFomatterForDB(year, month, day);
}
export function getLastDateInCurrentWeek(){
let currentDate = new Date()
let lastDateForWeek = new Date(new Date(currentDate).getTime() + (3600*1000*24*(new Date(currentDate).getDay() === 0 ? 0 : 7 -new Date(currentDate).getDay())))
let year = lastDateForWeek.getFullYear(),
month = lastDateForWeek.getMonth() + 1,
day = lastDateForWeek.getDate()
return this.dateFomatterForDB(year, month, day);
}
/* Date fomatter */
export function dateFomatterForDB(year, month, day) {
month = month < 10 ? '0' + month : month
day = day < 10 ? '0' + day : day
return year + "-" + month + "-" + day;
}2.2结果展示
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
