سال عضویت: {leaderInfoData.startMemberingDate}
\n شماره همراه: {leaderInfoData.phoneNumber}
\n مدارک: {leaderInfoData.certificates}
\n \n\n \r\n {permissions.includes('mountaineeringprogramsreport') && }\r\n
\r\n )\r\n}\r\n\r\nexport default Mountaineering\r\n","import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'\r\nimport {\r\n CChartBar,\r\n CChartDoughnut,\r\n CChartLine,\r\n CChartPie,\r\n CChartPolarArea,\r\n CChartRadar,\r\n} from '@coreui/react-chartjs'\r\nimport { DocsCallout } from 'src/components';\r\nimport { useParams } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport { Button, Flex, Input, Tabs, Upload, Select, Spin, Checkbox, Pagination } from 'antd';\r\nimport React, { useState, useEffect } from 'react';\r\nimport axios from 'axios';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { apiUrls } from '../../apiUrls.js';\r\nimport Program from \"../../components/Program.js\";\r\nimport { useNavigate } from 'react-router-dom';\r\nimport HideSidebarInMobileMode from \"../../components/HideSidebarInMobileMode.js\";\r\nconst baseURL = apiUrls.baseURL;\r\n\r\nconst Education = () => {\r\n\r\n const [data, setData] = useState([]);\r\n const [loading, setLoading] = useState(false);\r\n const [filter, setFilter] = useState({ skip: 0, limit: 10 });\r\n const permissions = useSelector((state) => state.permissions.permissions);\r\n const accessShowInSite = permissions.includes('createblog');\r\n const [loadingReport, setLoadingReport] = useState(false);\r\n const navigate = useNavigate();\r\n\r\n useEffect(() => {\r\n setLoading(true);\r\n fetchData()\r\n }, [filter])\r\n\r\n const getReport = async () => {\r\n setLoadingReport(true)\r\n const token = localStorage.getItem('damavandclub-token')\r\n try {\r\n const response = await axios.get(`${baseURL}/WorkingGroupCategory/GetExcelReport?id=11`, {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n }, 'responseType': 'blob'\r\n });\r\n const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });\r\n const url = window.URL.createObjectURL(blob);\r\n window.open(url, '_blank');\r\n\r\n setLoadingReport(false)\r\n } catch (error) {\r\n if (error.response.status == 401)\r\n navigate('/');\r\n setLoadingReport(false)\r\n } finally {\r\n setLoadingReport(false)\r\n }\r\n }\r\n const fetchData = async () => {\r\n\r\n const token = localStorage.getItem('damavandclub-token')\r\n try {\r\n const response = await axios.get(`${baseURL}/program/geteducationnotifyprograms?skip=${filter.skip}&limit=${filter.limit}`, {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-Type': 'application/json',\r\n }\r\n });\r\n\r\n var result = response.data.data;\r\n setData(result);\r\n setLoading(false);\r\n } catch (error) {\r\n if (error.response.status == 401)\r\n navigate('/');\r\n setLoading(false);\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n if (loading) {\r\n return \r\n {data?.items?.map((item, index) => {\r\n return \r\n \r\n })}\r\n setFilter({ skip: pageNumber - 1, limit: limit })}\r\n style={{ marginTop: 30, marginBottom: 5 }}\r\n current={filter.skip + 1}\r\n responsive={true}\r\n pageSize={filter.limit}\r\n showTotal={(total) => `تعداد کل: ${total} برنامه`}\r\n total={data.count} />\r\n
\r\n \r\n {permissions.includes('educationclassessreport') && }\r\n
\r\n )\r\n}\r\n\r\nexport default Education\r\n","import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'\r\nimport {\r\n CChartBar,\r\n CChartDoughnut,\r\n CChartLine,\r\n CChartPie,\r\n CChartPolarArea,\r\n CChartRadar,\r\n} from '@coreui/react-chartjs'\r\nimport { DocsCallout } from 'src/components';\r\nimport { useParams } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport { Button, Flex, Input, Tabs, Upload, Select, Spin, Checkbox, Pagination } from 'antd';\r\nimport React, { useState, useEffect } from 'react';\r\nimport axios from 'axios';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { apiUrls } from '../../apiUrls.js';\r\nimport Program from \"../../components/Program.js\";\r\nimport { useNavigate } from 'react-router-dom';\r\nimport HideSidebarInMobileMode from \"../../components/HideSidebarInMobileMode.js\";\r\nconst baseURL = apiUrls.baseURL;\r\n\r\nconst RockClimbing = () => {\r\n\r\n const [data, setData] = useState([]);\r\n const [loading, setLoading] = useState(false);\r\n const [filter, setFilter] = useState({ skip: 0, limit: 10 });\r\n const permissions = useSelector((state) => state.permissions.permissions);\r\n const [loadingReport, setLoadingReport] = useState(false);\r\n const navigate = useNavigate();\r\n\r\n useEffect(() => {\r\n setLoading(true);\r\n fetchData()\r\n }, [filter])\r\n\r\n const getReport = async () => {\r\n setLoadingReport(true)\r\n const token = localStorage.getItem('damavandclub-token')\r\n try {\r\n const response = await axios.get(`${baseURL}/WorkingGroupCategory/GetReport?id=3`, {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n }, 'responseType': 'blob'\r\n });\r\n const blob = new Blob([response.data], { type: 'application/pdf' });\r\n const url = window.URL.createObjectURL(blob);\r\n window.open(url, '_blank');\r\n\r\n setLoadingReport(false)\r\n } catch (error) {\r\n if (error.response.status == 401)\r\n navigate('/');\r\n setLoadingReport(false)\r\n } finally {\r\n setLoadingReport(false)\r\n }\r\n }\r\n\r\n const fetchData = async () => {\r\n\r\n const token = localStorage.getItem('damavandclub-token')\r\n try {\r\n const response = await axios.get(`${baseURL}/program/getClimbingNotifyPrograms?skip=${filter.skip}&limit=${filter.limit}`, {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-Type': 'application/json',\r\n }\r\n });\r\n\r\n var result = response.data.data;\r\n setData(result);\r\n setLoading(false);\r\n } catch (error) {\r\n if (error.response.status == 401)\r\n navigate('/');\r\n setLoading(false);\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n if (loading) {\r\n return \r\n {data?.items?.map((item, index) => {\r\n return \r\n \r\n })}\r\n setFilter({ skip: pageNumber - 1, limit: limit })}\r\n style={{ marginTop: 30, marginBottom: 5 }}\r\n current={filter.skip + 1}\r\n responsive={true}\r\n pageSize={filter.limit}\r\n showTotal={(total) => `تعداد کل: ${total} کلاس`}\r\n total={data.count} />\r\n
\r\n \r\n {permissions.includes('rockclimbingprogramsreport') && }\r\n
\r\n )\r\n}\r\n\r\nexport default RockClimbing\r\n","import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'\r\nimport {\r\n CChartBar,\r\n CChartDoughnut,\r\n CChartLine,\r\n CChartPie,\r\n CChartPolarArea,\r\n CChartRadar,\r\n} from '@coreui/react-chartjs'\r\nimport { DocsCallout } from 'src/components';\r\nimport { useParams } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport { Button, Flex, Input, Tabs, Upload, Select, Spin, Checkbox, Pagination } from 'antd';\r\nimport React, { useState, useEffect } from 'react';\r\nimport axios from 'axios';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { apiUrls } from '../../apiUrls.js';\r\nimport Program from \"../../components/Program.js\";\r\nimport { useNavigate } from 'react-router-dom';\r\nimport HideSidebarInMobileMode from \"../../components/HideSidebarInMobileMode.js\";\r\nconst baseURL = apiUrls.baseURL;\r\n\r\nconst Bicycling = () => {\r\n\r\n const [data, setData] = useState([]);\r\n const [loading, setLoading] = useState(false);\r\n const [filter, setFilter] = useState({ skip: 0, limit: 10 });\r\n const permissions = useSelector((state) => state.permissions.permissions);\r\n const accessShowInSite = permissions.includes('createblog');\r\n const navigate = useNavigate();\r\n\r\n useEffect(() => {\r\n setLoading(true);\r\n fetchData()\r\n }, [filter])\r\n\r\n const fetchData = async () => {\r\n\r\n const token = localStorage.getItem('damavandclub-token')\r\n try {\r\n const response = await axios.get(`${baseURL}/program/getBicyclingNotifyPrograms?skip=${filter.skip}&limit=${filter.limit}`, {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-Type': 'application/json',\r\n }\r\n });\r\n\r\n var result = response.data.data;\r\n setData(result);\r\n setLoading(false);\r\n } catch (error) {\r\n if (error.response.status == 401)\r\n navigate('/');\r\n setLoading(false);\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n if (loading) {\r\n return \r\n {data?.items?.map((item, index) => {\r\n return \r\n \r\n })}\r\n setFilter({ skip: pageNumber - 1, limit: limit })}\r\n style={{ marginTop: 30, marginBottom: 5 }}\r\n current={filter.skip + 1}\r\n responsive={true}\r\n pageSize={filter.limit}\r\n showTotal={(total) => `تعداد کل: ${total} برنامه`}\r\n total={data.count} />\r\n
\r\n \r\n \r\n \r\n })}\r\n setFilter({ skip: pageNumber - 1, limit: limit })}\r\n style={{ marginTop: 30, marginBottom: 5 }}\r\n current={filter.skip + 1}\r\n responsive={true}\r\n pageSize={filter.limit}\r\n showTotal={(total) => `تعداد کل: ${total} برنامه`}\r\n total={data.count} />\r\n
\r\n )\r\n}\r\n\r\nexport default Bicycling\r\n","import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'\r\nimport {\r\n CChartBar,\r\n CChartDoughnut,\r\n CChartLine,\r\n CChartPie,\r\n CChartPolarArea,\r\n CChartRadar,\r\n} from '@coreui/react-chartjs'\r\nimport { DocsCallout } from 'src/components';\r\nimport { useParams } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport { Button, Flex, Input, Tabs, Upload, Select, Spin, Checkbox, Pagination } from 'antd';\r\nimport React, { useState, useEffect } from 'react';\r\nimport axios from 'axios';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { apiUrls } from '../../apiUrls.js';\r\nimport Program from \"../../components/Program.js\";\r\nimport { useNavigate } from 'react-router-dom';\r\nimport HideSidebarInMobileMode from \"../../components/HideSidebarInMobileMode.js\";\r\nconst baseURL = apiUrls.baseURL;\r\n\r\nconst Canyoneering = () => {\r\n\r\n const [data, setData] = useState([]);\r\n const [loading, setLoading] = useState(false);\r\n const [filter, setFilter] = useState({ skip: 0, limit: 10 });\r\n const permissions = useSelector((state) => state.permissions.permissions);\r\n const accessShowInSite = permissions.includes('createblog');\r\n const navigate = useNavigate();\r\n\r\n useEffect(() => {\r\n setLoading(true);\r\n fetchData()\r\n }, [filter])\r\n\r\n const fetchData = async () => {\r\n\r\n const token = localStorage.getItem('damavandclub-token')\r\n try {\r\n const response = await axios.get(`${baseURL}/program/getCanyoningNotifyPrograms?skip=${filter.skip}&limit=${filter.limit}`, {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-Type': 'application/json',\r\n }\r\n });\r\n\r\n var result = response.data.data;\r\n setData(result);\r\n setLoading(false);\r\n } catch (error) {\r\n if (error.response.status == 401)\r\n navigate('/');\r\n setLoading(false);\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n if (loading) {\r\n return \r\n {data?.items?.map((item, index) => {\r\n return \r\n \r\n })}\r\n setFilter({ skip: pageNumber - 1, limit: limit })}\r\n style={{ marginTop: 30, marginBottom: 5 }}\r\n current={filter.skip + 1}\r\n responsive={true}\r\n pageSize={filter.limit}\r\n showTotal={(total) => `تعداد کل: ${total} برنامه`}\r\n total={data.count} />\r\n
\r\n )\r\n}\r\n\r\nexport default Canyoneering\r\n","import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'\r\nimport {\r\n CChartBar,\r\n CChartDoughnut,\r\n CChartLine,\r\n CChartPie,\r\n CChartPolarArea,\r\n CChartRadar,\r\n} from '@coreui/react-chartjs'\r\nimport { DocsCallout } from 'src/components';\r\nimport { useParams } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport { Button, Flex, Input, Tabs, Upload, Select, Spin, Checkbox, Pagination } from 'antd';\r\nimport React, { useState, useEffect } from 'react';\r\nimport axios from 'axios';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { apiUrls } from '../../apiUrls.js';\r\nimport Program from \"../../components/Program.js\";\r\nimport { useNavigate } from 'react-router-dom';\r\nimport HideSidebarInMobileMode from \"../../components/HideSidebarInMobileMode.js\";\r\nconst baseURL = apiUrls.baseURL;\r\n\r\nconst Skyrunning = () => {\r\n\r\n const [data, setData] = useState([]);\r\n const [loading, setLoading] = useState(false);\r\n const [filter, setFilter] = useState({ skip: 0, limit: 10 });\r\n const permissions = useSelector((state) => state.permissions.permissions);\r\n const accessShowInSite = permissions.includes('createblog');\r\n const navigate = useNavigate();\r\n\r\n useEffect(() => {\r\n setLoading(true);\r\n fetchData()\r\n }, [filter])\r\n\r\n const fetchData = async () => {\r\n\r\n const token = localStorage.getItem('damavandclub-token')\r\n try {\r\n const response = await axios.get(`${baseURL}/program/getSkyrunningNotifyPrograms?skip=${filter.skip}&limit=${filter.limit}`, {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-Type': 'application/json',\r\n }\r\n });\r\n\r\n var result = response.data.data;\r\n setData(result);\r\n setLoading(false);\r\n } catch (error) {\r\n if (error.response.status == 401)\r\n navigate('/');\r\n setLoading(false);\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n if (loading) {\r\n return \r\n {data?.items?.map((item, index) => {\r\n return \r\n \r\n })}\r\n setFilter({ skip: pageNumber - 1, limit: limit })}\r\n style={{ marginTop: 30, marginBottom: 5 }}\r\n current={filter.skip + 1}\r\n responsive={true}\r\n pageSize={filter.limit}\r\n showTotal={(total) => `تعداد کل: ${total} برنامه`}\r\n total={data.count} />\r\n
\r\n )\r\n}\r\n\r\nexport default Skyrunning\r\n","import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'\r\nimport {\r\n CChartBar,\r\n CChartDoughnut,\r\n CChartLine,\r\n CChartPie,\r\n CChartPolarArea,\r\n CChartRadar,\r\n} from '@coreui/react-chartjs'\r\nimport { DocsCallout } from 'src/components';\r\nimport { useParams } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport { Button, Flex, Input, Tabs, Upload, Select, Spin, Checkbox, Pagination } from 'antd';\r\nimport React, { useState, useEffect } from 'react';\r\nimport axios from 'axios';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { apiUrls } from '../../apiUrls.js';\r\nimport Program from \"../../components/Program.js\";\r\nimport { useNavigate } from 'react-router-dom';\r\nimport HideSidebarInMobileMode from \"../../components/HideSidebarInMobileMode.js\";\r\nconst baseURL = apiUrls.baseURL;\r\n\r\nconst MyJoinPrograms = () => {\r\n\r\n const [data, setData] = useState([]);\r\n const [loading, setLoading] = useState(false);\r\n const [filter, setFilter] = useState({ skip: 0, limit: 10 });\r\n const navigate = useNavigate();\r\n\r\n useEffect(() => {\r\n setLoading(true);\r\n fetchData()\r\n }, [filter])\r\n\r\n const fetchData = async () => {\r\n\r\n const token = localStorage.getItem('damavandclub-token')\r\n try {\r\n const response = await axios.get(`${baseURL}/program/getmyjoinprograms?skip=${filter.skip}&limit=${filter.limit}`, {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-Type': 'application/json',\r\n }\r\n });\r\n\r\n var result = response.data.data;\r\n setData(result);\r\n setLoading(false);\r\n } catch (error) {\r\n if (error.response.status == 401)\r\n navigate('/');\r\n setLoading(false);\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n if (loading) {\r\n return \r\n {data?.items?.map((item, index) => {\r\n return \r\n \r\n })}\r\n setFilter({ skip: pageNumber - 1, limit: limit })}\r\n style={{ marginTop: 30, marginBottom: 5 }}\r\n current={filter.skip + 1}\r\n responsive={true}\r\n pageSize={filter.limit}\r\n showTotal={(total) => `تعداد کل: ${total} برنامه`}\r\n total={data.count} />\r\n
\r\n )\r\n}\r\n\r\nexport default MyJoinPrograms\r\n","import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'\r\nimport {\r\n CChartBar,\r\n CChartDoughnut,\r\n CChartLine,\r\n CChartPie,\r\n CChartPolarArea,\r\n CChartRadar,\r\n} from '@coreui/react-chartjs'\r\nimport { DocsCallout } from 'src/components';\r\nimport { useParams } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport { Button, Flex, Input, Tabs, Upload, Select, Spin, Checkbox, Pagination } from 'antd';\r\nimport React, { useState, useEffect } from 'react';\r\nimport axios from 'axios';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { apiUrls } from '../../apiUrls.js';\r\nimport Program from \"../../components/Program.js\";\r\nimport { useNavigate } from 'react-router-dom';\r\nimport HideSidebarInMobileMode from \"../../components/HideSidebarInMobileMode.js\";\r\nconst baseURL = apiUrls.baseURL;\r\n\r\nconst MyPrograms = () => {\r\n\r\n const [data, setData] = useState([]);\r\n const [loading, setLoading] = useState(false);\r\n const [filter, setFilter] = useState({ skip: 0, limit: 10 });\r\n const permissions = useSelector((state) => state.permissions.permissions);\r\n const accessShowInSite = permissions.includes('createblog');\r\n const navigate = useNavigate();\r\n\r\n useEffect(() => {\r\n setLoading(true);\r\n fetchData()\r\n }, [filter])\r\n\r\n const fetchData = async () => {\r\n\r\n const token = localStorage.getItem('damavandclub-token')\r\n try {\r\n const response = await axios.get(`${baseURL}/program/getMyPrograms?skip=${filter.skip}&limit=${filter.limit}`, {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-Type': 'application/json',\r\n }\r\n });\r\n\r\n var result = response.data.data;\r\n setData(result);\r\n setLoading(false);\r\n } catch (error) {\r\n if (error.response.status == 401)\r\n navigate('/');\r\n setLoading(false);\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n if (loading) {\r\n return \r\n {data?.items?.map((item, index) => {\r\n return \r\n \r\n })}\r\n setFilter({ skip: pageNumber - 1, limit: limit })}\r\n style={{ marginTop: 30, marginBottom: 5 }}\r\n current={filter.skip + 1}\r\n responsive={true}\r\n pageSize={filter.limit}\r\n showTotal={(total) => `تعداد کل: ${total} برنامه`}\r\n total={data.count} />\r\n
\r\n )\r\n}\r\n\r\nexport default MyPrograms\r\n","import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'\r\nimport {\r\n CChartBar,\r\n CChartDoughnut,\r\n CChartLine,\r\n CChartPie,\r\n CChartPolarArea,\r\n CChartRadar,\r\n} from '@coreui/react-chartjs'\r\nimport { DocsCallout } from 'src/components';\r\nimport { useParams } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport { Button, Flex, Input, Tabs, Upload, Select, Spin, Checkbox, Pagination } from 'antd';\r\nimport React, { useState, useEffect } from 'react';\r\nimport axios from 'axios';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { apiUrls } from '../../apiUrls.js';\r\nimport Program from \"../../components/Program.js\";\r\nimport { useNavigate } from 'react-router-dom';\r\nimport HideSidebarInMobileMode from \"../../components/HideSidebarInMobileMode.js\";\r\nconst baseURL = apiUrls.baseURL;\r\n\r\nconst IceClimbing = () => {\r\n\r\n const [data, setData] = useState([]);\r\n const [loading, setLoading] = useState(false);\r\n const [filter, setFilter] = useState({ skip: 0, limit: 10 });\r\n const permissions = useSelector((state) => state.permissions.permissions);\r\n const navigate = useNavigate();\r\n\r\n useEffect(() => {\r\n setLoading(true);\r\n fetchData()\r\n }, [filter])\r\n\r\n const fetchData = async () => {\r\n\r\n const token = localStorage.getItem('damavandclub-token')\r\n try {\r\n const response = await axios.get(`${baseURL}/program/getIceClimbingNotifyPrograms?skip=${filter.skip}&limit=${filter.limit}`, {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-Type': 'application/json',\r\n }\r\n });\r\n\r\n var result = response.data.data;\r\n setData(result);\r\n setLoading(false);\r\n } catch (error) {\r\n if (error.response.status == 401)\r\n navigate('/');\r\n setLoading(false);\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n if (loading) {\r\n return \r\n\r\n {data?.items?.map((item, index) => {\r\n return \r\n \r\n })}\r\n setFilter({ skip: pageNumber - 1, limit: limit })}\r\n style={{ marginTop: 30, marginBottom: 5 }}\r\n current={filter.skip + 1}\r\n responsive={true}\r\n pageSize={filter.limit}\r\n showTotal={(total) => `تعداد کل: ${total} برنامه`}\r\n total={data.count} />\r\n
\r\n )\r\n}\r\n\r\nexport default IceClimbing\r\n","import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'\r\nimport {\r\n CChartBar,\r\n CChartDoughnut,\r\n CChartLine,\r\n CChartPie,\r\n CChartPolarArea,\r\n CChartRadar,\r\n} from '@coreui/react-chartjs'\r\nimport { DocsCallout } from 'src/components';\r\nimport { useParams } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport { Button, Flex, Input, Tabs, Upload, Select, Spin, Checkbox, Pagination } from 'antd';\r\nimport React, { useState, useEffect } from 'react';\r\nimport axios from 'axios';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { apiUrls } from '../../apiUrls.js';\r\nimport Program from \"../../components/Program.js\";\r\nimport { useNavigate } from 'react-router-dom';\r\nimport HideSidebarInMobileMode from \"../../components/HideSidebarInMobileMode.js\";\r\nconst baseURL = apiUrls.baseURL;\r\n\r\nconst Caving = () => {\r\n\r\n const [data, setData] = useState([]);\r\n const [loading, setLoading] = useState(false);\r\n const [filter, setFilter] = useState({ skip: 0, limit: 10 });\r\n const permissions = useSelector((state) => state.permissions.permissions);\r\n const [loadingReport, setLoadingReport] = useState(false);\r\n const navigate = useNavigate();\r\n\r\n useEffect(() => {\r\n setLoading(true);\r\n fetchData()\r\n }, [filter])\r\n\r\n const getReport = async () => {\r\n setLoadingReport(true)\r\n const token = localStorage.getItem('damavandclub-token')\r\n try {\r\n const response = await axios.get(`${baseURL}/WorkingGroupCategory/GetReport?id=8`, {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n }, 'responseType': 'blob'\r\n });\r\n const blob = new Blob([response.data], { type: 'application/pdf' });\r\n const url = window.URL.createObjectURL(blob);\r\n window.open(url, '_blank');\r\n\r\n setLoadingReport(false)\r\n } catch (error) {\r\n if (error.response.status == 401)\r\n navigate('/');\r\n setLoadingReport(false)\r\n } finally {\r\n setLoadingReport(false)\r\n }\r\n }\r\n\r\n const fetchData = async () => {\r\n\r\n const token = localStorage.getItem('damavandclub-token')\r\n try {\r\n const response = await axios.get(`${baseURL}/program/getCavingNotifyPrograms?skip=${filter.skip}&limit=${filter.limit}`, {\r\n headers: {\r\n 'Authorization': `Bearer ${token}`,\r\n 'Content-Type': 'application/json',\r\n }\r\n });\r\n\r\n var result = response.data.data;\r\n setData(result);\r\n setLoading(false);\r\n } catch (error) {\r\n if (error.response.status == 401)\r\n navigate('/');\r\n setLoading(false);\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n if (loading) {\r\n return \r\n {permissions.includes('mountaineeringprogramsreport') && }\r\n
\r\n )\r\n}\r\n\r\nexport default Caving\r\n","import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'\nimport {\n CChartBar,\n CChartDoughnut,\n CChartLine,\n CChartPie,\n CChartPolarArea,\n CChartRadar,\n} from '@coreui/react-chartjs'\nimport { DocsCallout } from 'src/components';\nimport { useParams } from 'react-router-dom';\nimport { toast } from 'react-toastify';\nimport { Button, Flex, Input, Tabs, Upload, Select, Spin, Checkbox, Pagination } from 'antd';\nimport React, { useState, useEffect } from 'react';\nimport axios from 'axios';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { apiUrls } from '../../apiUrls.js';\nimport Program from \"../../components/Program.js\";\nimport { useNavigate } from 'react-router-dom';\nimport HideSidebarInMobileMode from \"../../components/HideSidebarInMobileMode.js\";\nconst baseURL = apiUrls.baseURL;\n\nconst Trial = () => {\n\n const [data, setData] = useState([]);\n const [loading, setLoading] = useState(false);\n const [loadingReport, setLoadingReport] = useState(false);\n const [filter, setFilter] = useState({ skip: 0, limit: 100 });\n const permissions = useSelector((state) => state.permissions.permissions);\n const navigate = useNavigate();\n const { year } = useParams();\n\n useEffect(() => {\n setLoading(true);\n fetchData()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [filter])\n\n useEffect(() => {\n setLoading(true);\n setData([]);\n setFilter({ skip: 0, limit: 100 })\n fetchData()\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [year])\n\n const getReport = async () => {\n setLoadingReport(true)\n const token = localStorage.getItem('damavandclub-token')\n try {\n const response = await axios.get(`${baseURL}/program/GetTrialNotifyProgramsReport?year=${year}`, {\n headers: {\n 'Authorization': `Bearer ${token}`,\n }, 'responseType': 'blob'\n });\n const blob = new Blob([response.data], { type: 'application/pdf' });\n const url = window.URL.createObjectURL(blob);\n window.open(url, '_blank');\n\n setLoadingReport(false)\n } catch (error) {\n if (error.response.status == 401)\n navigate('/');\n setLoadingReport(false)\n } finally {\n setLoadingReport(false)\n }\n }\n\n const fetchData = async () => {\n\n const token = localStorage.getItem('damavandclub-token')\n try {\n const response = await axios.get(`${baseURL}/program/getTrialNotifyPrograms?skip=${filter.skip}&limit=${filter.limit}&year=${year}`, {\n headers: {\n 'Authorization': `Bearer ${token}`,\n 'Content-Type': 'application/json',\n }\n });\n\n var result = response.data.data;\n setData(result);\n setLoading(false);\n } catch (error) {\n if (error.response.status == 401)\n navigate('/');\n setLoading(false);\n } finally {\n setLoading(false);\n }\n };\n\n if (loading) {\n return \r\n {data?.items?.map((item, index) => {\r\n return \r\n \r\n })}\r\n setFilter({ skip: pageNumber - 1, limit: limit })}\r\n style={{ marginTop: 30, marginBottom: 5 }}\r\n current={filter.skip + 1}\r\n responsive={true}\r\n pageSize={filter.limit}\r\n showTotal={(total) => `تعداد کل: ${total} برنامه`}\r\n total={data.count} />\r\n
\r\n \n {permissions.includes('trialprogramsreport') && }\n
\n\n )\n}\n\nexport default Trial\n","import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'\nimport {\n CChartBar,\n CChartDoughnut,\n CChartLine,\n CChartPie,\n CChartPolarArea,\n CChartRadar,\n} from '@coreui/react-chartjs'\nimport { DocsCallout } from 'src/components';\nimport { useParams } from 'react-router-dom';\nimport { toast } from 'react-toastify';\nimport { Button, Flex, Input, Upload, Select, Spin, Checkbox, Modal } from 'antd';\nimport React, { useState, useEffect, useCallback } from 'react';\nimport axios from 'axios';\nimport { useSelector } from 'react-redux';\nimport { UploadOutlined } from '@ant-design/icons';\nimport DatePicker, { utils } from '@hassanmojab/react-modern-calendar-datepicker';\nimport jquery from 'jquery';\nimport InputNumberFormat from \"../../components/InputNumberFormat.js\";\nimport BraftEditor from 'braft-editor';\nimport { FilePdfOutlined } from '@ant-design/icons';\nimport { apiUrls } from '../../apiUrls.js';\nimport { useNavigate } from 'react-router-dom';\nimport HideSidebarInMobileMode from \"../../components/HideSidebarInMobileMode.js\";\nimport { Tab, Tabs, TabList, TabPanel } from 'react-tabs';\nimport 'react-tabs/style/react-tabs.css';\n\nconst baseURL = apiUrls.baseURL;\nconst { TabPane } = Tabs;\nconst { Option } = Select;\n\nconst ProgramForm = () => {\n\n const [data, setData] = useState({});\n const [loading, setLoading] = useState(false);\n const [loadingGetUserInfo, setLoadingGetUserInfo] = useState(false);\n const [loadingSave, setLoadingSave] = useState(false);\n const [startDate, setStartDate] = useState(null);\n const [endDate, setEndDate] = useState(null);\n const [deadlineDate, setDeadLineDate] = useState(null);\n const [dropDownDiscountTypes, setDropDownDiscountType] = useState([]);\n const [dropDownWorkingGroup, setDropDownWorkingGroup] = useState([]);\n const [dropDownRequirements, setDropDownRequirements] = useState([]);\n const [dropDownGenders, setDropDownGenders] = useState([]);\n const [isShowLeaderInfoModalVisible, setIsShowLeaderInfoModalVisible] = useState(false);\n const [leaderInfoData, setLeaderInfoData] = useState({});\n const [dropDownLevel, setDropDownLevel] = useState([]);\n const [dropDownType, setDropDownType] = useState([]);\n const [dropDownLeader, setDropDownLeaders] = useState([]);\n const permissions = useSelector((state) => state.permissions.permissions);\n const accessShowInSite = permissions.includes('createblog');\n const [renderedTabs, setRenderedTabs] = useState([0]);\n const navigate = useNavigate();\n //eslint-disable-next-line react-hooks/rules-of-hooks \n const { id } = useParams();\n\n const [editorState, setEditorState] = useState(\n BraftEditor.createEditorState(null)\n );\n\n const handleEditorChange = (content) => {\n const modifiedContent = content.toHTML().replace(/\n {data?.items?.map((item, index) => {\n return \n \n })}\n setFilter({ skip: pageNumber - 1, limit: limit })}\n style={{ marginTop: 30, marginBottom: 5 }}\n current={filter.skip + 1}\n responsive={true}\n pageSize={filter.limit}\n showTotal={(total) => `تعداد کل: ${total} برنامه`}\n total={data.count} />\n
\n\n \n \n {(state) => {\n const transitionClass = getTransitionClass(state)\n return typeof window !== 'undefined' && portal\n ? createPortal(modal(forkedRef, transitionClass), document.body)\n : modal(forkedRef, transitionClass)\n }}\n \n {typeof window !== 'undefined' && portal\n ? backdrop && createPortal( {\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n}\n\nexport const CModalBody = forwardRef(\n ({ children, className, ...rest }, ref) => {\n const _className = classNames('modal-body', className)\n\n return (\n {\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n}\n\nexport const CModalFooter = forwardRef(\n ({ children, className, ...rest }, ref) => {\n const _className = classNames('modal-footer', className)\n\n return (\n {\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n /**\n * Add a close button component to the header.\n */\n closeButton?: boolean\n}\n\nexport const CModalHeader = forwardRef(\n ({ children, className, closeButton = true, ...rest }, ref) => {\n const { setVisible } = useContext(CModalContext)\n const _className = classNames('modal-header', className)\n\n return (\n {\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: string | ElementType\n}\n\nexport const CModalTitle = forwardRef(\n ({ children, component: Component = 'h5', className, ...rest }, ref) => {\n const _className = classNames('modal-title', className)\n\n return (\n \n {children}\n \n )\n },\n)\n\nCModalTitle.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n component: PropTypes.elementType,\n}\n\nCModalTitle.displayName = 'CModalTitle'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CNavProps\n extends HTMLAttributes {\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: string | ElementType\n /**\n * Specify a layout type for component.\n */\n layout?: 'fill' | 'justified'\n /**\n * Set the nav variant to tabs or pills.\n */\n variant?: 'tabs' | 'pills'\n}\n\nexport const CNav = forwardRef(\n ({ children, className, component: Component = 'ul', layout, variant, ...rest }, ref) => {\n const _className = classNames(\n 'nav',\n {\n [`nav-${layout}`]: layout,\n [`nav-${variant}`]: variant,\n },\n className,\n )\n\n return (\n \n {children}\n \n )\n },\n)\n\nCNav.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n component: PropTypes.elementType,\n layout: PropTypes.oneOf(['fill', 'justified']),\n variant: PropTypes.oneOf(['tabs', 'pills']),\n}\n\nCNav.displayName = 'CNav'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CNavGroupItemsProps extends HTMLAttributes {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n}\n\nexport const CNavGroupItems = forwardRef(\n ({ children, className, ...rest }, ref) => {\n const _className = classNames('nav-group-items', className)\n return (\n {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n}\n\ninterface ContextProps {\n visibleGroup: string\n setVisibleGroup: React.Dispatch>\n}\n\nexport const CNavContext = createContext({} as ContextProps)\n\nexport const CSidebarNav = forwardRef(\n ({ children, className, ...rest }, ref) => {\n const [visibleGroup, setVisibleGroup] = useState('')\n const CNavContextValues = {\n visibleGroup,\n setVisibleGroup,\n }\n const classes = classNames('sidebar-nav', className)\n return (\n (\n ({ children, className, compact, idx, toggler, visible, ...rest }, ref) => {\n const [height, setHeight] = useState()\n const navItemsRef = useRef(null)\n\n const { visibleGroup, setVisibleGroup } = useContext(CNavContext)\n\n const [_visible, setVisible] = useState(\n Boolean(\n visible || (idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString())),\n ),\n )\n\n useEffect(() => {\n setVisible(Boolean(idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString())))\n }, [visibleGroup])\n\n const handleTogglerOnCLick = (event: React.MouseEvent) => {\n event.preventDefault()\n setVisibleGroup(\n _visible ? (idx?.toString().includes('.') ? idx.slice(0, idx.lastIndexOf('.')) : '') : idx,\n )\n setVisible(!_visible)\n }\n\n const style: CSSProperties = {\n height: 0,\n }\n\n const onEntering = () => {\n navItemsRef.current && setHeight(navItemsRef.current.scrollHeight)\n }\n\n const onEntered = () => {\n setHeight('auto')\n }\n\n const onExit = () => {\n navItemsRef.current && setHeight(navItemsRef.current.scrollHeight)\n }\n\n const onExiting = () => {\n // @ts-expect-error reflow is necessary to get correct height of the element\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const reflow = navItemsRef.current?.offsetHeight\n setHeight(0)\n }\n\n const onExited = () => {\n setHeight(0)\n }\n\n const transitionStyles = {\n entering: { display: 'block', height: height },\n entered: { display: 'block', height: height },\n exiting: { display: 'block', height: height },\n exited: { height: height },\n }\n\n const _className = classNames('nav-group', { show: _visible }, className)\n\n return (\n \n {toggler && (\n handleTogglerOnCLick(event)}>\n {toggler}\n \n )}\n \n {(state) => (\n \n {React.Children.map(children, (child, index) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, { key: index, idx: `${idx}.${index}` })\n }\n return\n })}\n \n )}\n \n \n )\n },\n)\n\nCNavGroup.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n compact: PropTypes.bool,\n idx: PropTypes.string,\n toggler: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n visible: PropTypes.bool,\n}\n\nCNavGroup.displayName = 'CNavGroup'\n","import React, { ElementType, forwardRef, useContext, useEffect, useRef } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport { useForkedRef } from '../../utils/hooks'\n\nimport { CNavContext } from '../sidebar/CSidebarNav'\nimport { CLinkProps, CLink } from '../link/CLink'\nexport interface CNavLinkProps extends Omit {\n /**\n * Toggle the active state for the component.\n */\n active?: boolean\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: string | ElementType\n /**\n * Toggle the disabled state for the component.\n */\n disabled?: boolean\n /**\n * @ignore\n */\n idx?: string\n /**\n * @ignore\n */\n to?: string\n}\n\nexport const CNavLink = forwardRef<\n HTMLButtonElement | HTMLAnchorElement | HTMLLIElement,\n CNavLinkProps\n>(({ children, className, idx, ...rest }, ref) => {\n const navLinkRef = useRef(null)\n const forkedRef = useForkedRef(ref, navLinkRef)\n\n const { setVisibleGroup } = useContext(CNavContext)\n const _className = classNames('nav-link', className)\n\n useEffect(() => {\n rest.active = navLinkRef.current?.classList.contains('active')\n idx && rest.active && setVisibleGroup(idx)\n }, [rest.active, className])\n\n return (\n \n {children}\n \n )\n})\n\nCNavLink.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n idx: PropTypes.string,\n}\n\nCNavLink.displayName = 'CNavLink'\n","import React, { forwardRef } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport { CNavLink, CNavLinkProps } from './CNavLink'\n\nexport const CNavItem = forwardRef(\n ({ children, className, ...rest }, ref) => {\n const _className = classNames('nav-item', className)\n if (rest.href || rest.to) {\n children = (\n \n {children}\n \n )\n }\n return (\n \n {children}\n \n )\n },\n)\n\nCNavItem.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCNavItem.displayName = 'CNavItem'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CNavTitleProps extends HTMLAttributes {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n}\n\nexport const CNavTitle = forwardRef(\n ({ children, className, ...rest }, ref) => {\n const _className = classNames('nav-title', className)\n return (\n \n {children}\n \n )\n },\n)\n\nCNavTitle.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCNavTitle.displayName = 'CNavTitle'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport { Colors, colorPropType } from '../Types'\n\nexport interface CNavbarProps extends HTMLAttributes {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Sets the color context of the component to one of CoreUI’s themed colors.\n *\n * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string\n */\n color?: Colors\n /**\n * Sets if the color of text should be colored for a light or dark dark background.\n */\n colorScheme?: 'dark' | 'light'\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: string | ElementType\n /**\n * Defines optional container wrapping children elements.\n */\n container?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'\n /**\n * Defines the responsive breakpoint to determine when content collapses.\n */\n expand?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n /**\n * Place component in non-static positions.\n */\n placement?: 'fixed-top' | 'fixed-bottom' | 'sticky-top'\n}\n\nexport const CNavbar = forwardRef(\n (\n {\n children,\n className,\n color,\n colorScheme,\n component: Component = 'nav',\n container,\n expand,\n placement,\n ...rest\n },\n ref,\n ) => {\n const _className = classNames(\n 'navbar',\n {\n [`bg-${color}`]: color,\n [`navbar-${colorScheme}`]: colorScheme,\n [typeof expand === 'boolean' ? 'navbar-expand' : `navbar-expand-${expand}`]: expand,\n },\n placement,\n className,\n )\n\n let content\n if (container) {\n content = (\n \n {content}\n \n )\n },\n)\n\nCNavbar.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n color: colorPropType,\n colorScheme: PropTypes.oneOf(['dark', 'light']),\n component: PropTypes.elementType,\n container: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'>([\n 'sm',\n 'md',\n 'lg',\n 'xl',\n 'xxl',\n 'fluid',\n ]),\n ]),\n expand: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),\n ]),\n placement: PropTypes.oneOf(['fixed-top', 'fixed-bottom', 'sticky-top']),\n}\n\nCNavbar.displayName = 'CNavbar'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CNavbarBrandProps extends HTMLAttributes {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n *\n */\n component?: string | ElementType\n /**\n * The href attribute specifies the URL of the page the link goes to.\n */\n href?: string\n}\n\nexport const CNavbarBrand = forwardRef(\n ({ children, component, className, ...rest }, ref) => {\n const Component = component ? component : rest.href ? 'a' : 'span'\n const _className = classNames('navbar-brand', className)\n\n return (\n \n {children}\n \n )\n },\n)\n\nCNavbarBrand.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n component: PropTypes.elementType,\n}\n\nCNavbarBrand.displayName = 'CNavbarBrand'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CNavbarNavProps extends HTMLAttributes {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: string | ElementType\n}\n\nexport const CNavbarNav = forwardRef(\n ({ children, component: Component = 'ul', className, ...rest }, ref) => {\n const _className = classNames('navbar-nav', className)\n\n return (\n \n {children}\n \n )\n },\n)\n\nCNavbarNav.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n component: PropTypes.elementType,\n}\n\nCNavbarNav.displayName = 'CNavbarNav'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CNavbarTextProps extends HTMLAttributes {\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n}\n\nexport const CNavbarText = forwardRef(\n ({ children, className, ...rest }, ref) => {\n const _className = classNames('navbar-text', className)\n\n return (\n \n {children}\n \n )\n },\n)\n\nCNavbarText.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCNavbarText.displayName = 'CNavbarText'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CNavbarTogglerProps extends HTMLAttributes {\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n}\n\nexport const CNavbarToggler = forwardRef(\n ({ children, className, ...rest }, ref) => {\n const _className = classNames('navbar-toggler', className)\n\n return (\n \n )\n },\n)\n\nCNavbarToggler.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCNavbarToggler.displayName = 'CNavbarToggler'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CPaginationProps extends HTMLAttributes {\n /**\n * Set the alignment of pagination components.\n */\n align?: 'start' | 'center' | 'end'\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n /**\n * Size the component small or large.\n */\n size?: 'sm' | 'lg'\n}\n\nexport const CPagination = forwardRef(\n ({ children, align, className, size, ...rest }, ref) => {\n const _className = classNames(\n 'pagination',\n {\n [`justify-content-${align}`]: align,\n [`pagination-${size}`]: size,\n },\n className,\n )\n return (\n \n )\n },\n)\n\nCPagination.propTypes = {\n align: PropTypes.oneOf(['start', 'center', 'end']),\n children: PropTypes.node,\n className: PropTypes.string,\n size: PropTypes.oneOf(['sm', 'lg']),\n}\n\nCPagination.displayName = 'CPagination'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport { CLink } from '../link/CLink'\n\nexport interface CPaginationItemProps extends HTMLAttributes {\n /**\n * Toggle the active state for the component.\n */\n active?: boolean\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: string | ElementType\n /**\n * Toggle the disabled state for the component.\n */\n disabled?: boolean\n}\n\nexport const CPaginationItem = forwardRef(\n ({ children, className, component, ...rest }, ref) => {\n const _className = classNames(\n 'page-item',\n {\n active: rest.active,\n disabled: rest.disabled,\n },\n className,\n )\n\n const Component = component ? component : rest.active ? 'span' : 'a'\n\n return (\n \n {Component === 'a' ? (\n \n {children}\n \n ) : (\n \n {children}\n \n )}\n \n )\n },\n)\n\nCPaginationItem.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n component: PropTypes.elementType,\n}\n\nCPaginationItem.displayName = 'CPaginationItem'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport { Colors, colorPropType } from '../Types'\n\nexport interface CPlaceholderProps extends HTMLAttributes {\n /**\n * Set animation type to better convey the perception of something being actively loaded.\n */\n animation?: 'glow' | 'wave'\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Sets the color context of the component to one of CoreUI’s themed colors.\n *\n * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string\n */\n color?: Colors\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: string | ElementType\n /**\n * Size the component extra small, small, or large.\n */\n size?: 'xs' | 'sm' | 'lg'\n /**\n * The number of columns on extra small devices (<576px).\n */\n xs?: number\n /**\n * The number of columns on small devices (<768px).\n */\n sm?: number\n /**\n * The number of columns on medium devices (<992px).\n */\n md?: number\n /**\n * The number of columns on large devices (<1200px).\n */\n lg?: number\n /**\n * The number of columns on X-Large devices (<1400px).\n */\n xl?: number\n /**\n * The number of columns on XX-Large devices (≥1400px).\n */\n xxl?: number\n}\n\nconst BREAKPOINTS = [\n 'xxl' as const,\n 'xl' as const,\n 'lg' as const,\n 'md' as const,\n 'sm' as const,\n 'xs' as const,\n]\n\nexport const CPlaceholder = forwardRef(\n (\n { children, animation, className, color, component: Component = 'span', size, ...rest },\n ref,\n ) => {\n const repsonsiveClassNames: string[] = []\n\n BREAKPOINTS.forEach((bp) => {\n const breakpoint = rest[bp]\n delete rest[bp]\n\n const infix = bp === 'xs' ? '' : `-${bp}`\n\n if (typeof breakpoint === 'number') {\n repsonsiveClassNames.push(`col${infix}-${breakpoint}`)\n }\n\n if (typeof breakpoint === 'boolean') {\n repsonsiveClassNames.push(`col${infix}`)\n }\n })\n\n const _className = classNames(\n animation ? `placeholder-${animation}` : 'placeholder',\n {\n [`bg-${color}`]: color,\n [`placeholder-${size}`]: size,\n },\n repsonsiveClassNames,\n className,\n )\n\n return (\n \n {children}\n \n )\n },\n)\n\nCPlaceholder.propTypes = {\n animation: PropTypes.oneOf(['glow', 'wave']),\n children: PropTypes.node,\n className: PropTypes.string,\n color: colorPropType,\n component: PropTypes.elementType,\n size: PropTypes.oneOf(['xs', 'sm', 'lg']),\n}\n\nCPlaceholder.displayName = 'CPlaceholder'\n","import React, { FC, ReactElement, ReactNode, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport { Manager, Popper, Reference } from 'react-popper'\nimport { Transition } from 'react-transition-group'\n\n// import { CPopoverContent } from './CPopoverContent'\nimport { Triggers, triggerPropType } from '../Types'\n\nexport interface CPopoverProps {\n children: ReactElement\n /**\n * Content node for your component.\n */\n content: ReactNode | string\n /**\n * Offset of the popover relative to its target.\n */\n offset?: [number, number]\n /**\n * Callback fired when the component requests to be hidden.\n */\n onHide?: () => void\n /**\n * Callback fired when the component requests to be shown.\n */\n onShow?: () => void\n /**\n * Title node for your component.\n */\n title?: ReactNode | string\n /**\n * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.\n *\n * @type 'hover' | 'focus' | 'click'\n */\n trigger?: Triggers | Triggers[]\n /**\n * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.\n */\n placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'\n /**\n * Toggle the visibility of popover component.\n */\n visible?: boolean\n}\n\nexport const CPopover: FC = ({\n children,\n content,\n placement = 'top',\n offset = [0, 8],\n onHide,\n onShow,\n title,\n trigger = 'click',\n visible,\n ...rest\n}) => {\n const [_visible, setVisible] = useState(visible)\n\n const getTransitionClass = (state: string) => {\n return state === 'entering'\n ? 'fade'\n : state === 'entered'\n ? 'fade show'\n : state === 'exiting'\n ? 'fade'\n : 'fade'\n }\n\n return (\n \n \n {({ ref }) =>\n React.cloneElement(children, {\n ref: ref,\n ...((trigger === 'click' || trigger.includes('click')) && {\n onClick: () => setVisible(!_visible),\n }),\n ...((trigger === 'focus' || trigger.includes('focus')) && {\n onFocus: () => setVisible(true),\n onBlur: () => setVisible(false),\n }),\n ...((trigger === 'hover' || trigger.includes('hover')) && {\n onMouseEnter: () => setVisible(true),\n onMouseLeave: () => setVisible(false),\n }),\n })\n }\n \n {typeof window !== 'undefined' &&\n createPortal(\n \n {(state) => {\n const transitionClass = getTransitionClass(state)\n return (\n \n {({ arrowProps, style, ref }) => (\n \n \n
\n )}\n \n )\n }}\n ,\n document.body,\n )}\n \n )\n}\n\nCPopover.propTypes = {\n children: PropTypes.any,\n content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),\n offset: PropTypes.any, // TODO: find good proptype\n onHide: PropTypes.func,\n onShow: PropTypes.func,\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n trigger: triggerPropType,\n visible: PropTypes.bool,\n}\n\nCPopover.displayName = 'CPopover'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport { Colors, colorPropType } from '../Types'\nexport interface CProgressBarProps extends HTMLAttributes\n {id !== undefined ? : }\n\n\n \n \n فارسی \n انگلیسی \n {id !== undefined && تصاویر }\n {id !== undefined && گزارش برنامه }\n {id !== undefined && آپلود فایل گزارش برنامه }\n \n\n \n \n setData({ ...data, nameFa: event.target.value })} style={{ marginTop: 5 }} size=\"large\" />\n\n \n setData({ ...data, amount: value })} />\n\n \n setData({ ...data, discountAmount: value })} />\n\n {data.discountAmount !== undefined && data.discountAmount !== \"\" && data.discountAmount !== null ? setData({ ...data, discountType: value })}\n value={data.discountType}\n >\n {dropDownDiscountTypes?.map((item) => (\n \n ))}\n : <>}\n \n setData({ ...data, capacity: event.target.value })} size=\"large\" />\n setData({ ...data, workingGroupCategoryId: value })}\n value={data.workingGroupCategoryId}\n >\n {dropDownWorkingGroup?.map((item) => (\n \n ))}\n \n\n {data.workingGroupCategoryId === 11 && <>\n setData({ ...data, gender: value })}\n value={data.gender}\n >\n {dropDownGenders?.map((item) => (\n \n ))}\n }\n\n \n setData({ ...data, socialMediaGroupLink: event.target.value })} style={{ marginTop: 5 }} size=\"large\" />\n\n {\n if (value == 1)\n alert(\"نوع برنامه ای که انتخاب کرده اید شامل چرخه کارگروه باشگاه برای اجرا نخواهد شد و صرفا در آرشیو برنامه ها ذخیره خواهد شد\")\n setData({ ...data, programType: value })\n }\n\n }\n value={data.programType}\n >\n {dropDownType?.map((item) => (\n \n ))}\n \n setData({ ...data, programLevel: value })}\n value={data.programLevel}\n >\n {dropDownLevel?.map((item) => (\n \n ))}\n \n \n setData({ ...data, leaderId: value })}\n value={data.leaderId}\n >\n {dropDownLeader?.map((item) => (\n \n ))}\n \n \n setData({ ...data, programAssistantLeaderIds: value })}\n value={data.programAssistantLeaderIds}\n >\n {dropDownLeader?.map((item) => (\n \n ))}\n \n \n setData({ ...data, programRequirementIds: value })}\n value={data.programRequirementIds}\n >\n {dropDownRequirements?.map((item) => (\n \n ))}\n \n \n {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Size the component small or large.\n */\n size?: 'sm' | 'lg'\n}\n\nexport const CInputGroup = forwardRef(\n ({ children, className, size, ...rest }, ref) => {\n const _className = classNames(\n 'input-group',\n {\n [`input-group-${size}`]: size,\n },\n className,\n )\n return (\n {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: string | ElementType\n}\n\nexport const CInputGroupText = forwardRef(\n ({ children, className, component: Component = 'span', ...rest }, ref) => {\n const _className = classNames('input-group-text', className)\n return (\n \n {children}\n \n )\n },\n)\n\nCInputGroupText.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n component: PropTypes.elementType,\n}\n\nCInputGroupText.displayName = 'CInputGroupText'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CHeaderProps extends HTMLAttributes {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Defines optional container wrapping children elements.\n */\n container?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'\n /**\n * Place header in non-static positions.\n */\n position?: 'fixed' | 'sticky'\n}\n\nexport const CHeader = forwardRef(\n ({ children, className, container, position, ...rest }, ref) => {\n const _className = classNames('header', { [`header-${position}`]: position }, className)\n\n let content\n if (container) {\n content = (\n {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: string | ElementType\n}\n\nexport const CHeaderBrand = forwardRef(\n ({ children, component: Component = 'a', className, ...rest }, ref) => {\n const _className = classNames('header-brand', className)\n\n return (\n \n {children}\n \n )\n },\n)\n\nCHeaderBrand.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n component: PropTypes.elementType,\n}\n\nCHeaderBrand.displayName = 'CHeaderBrand'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CHeaderDividerProps extends HTMLAttributes {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n}\n\nexport const CHeaderDivider = forwardRef(\n ({ className, ...rest }, ref) => {\n const _className = classNames('header-divider', className)\n\n return \n },\n)\n\nCHeaderDivider.propTypes = {\n className: PropTypes.string,\n}\n\nCHeaderDivider.displayName = 'CHeaderDivider'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CHeaderNavProps extends HTMLAttributes {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: string | ElementType\n}\n\nexport const CHeaderNav = forwardRef(\n ({ children, component: Component = 'ul', className, ...rest }, ref) => {\n const _className = classNames('header-nav', className)\n\n return (\n \n {children}\n \n )\n },\n)\n\nCHeaderNav.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n component: PropTypes.elementType,\n}\n\nCHeaderNav.displayName = 'CHeaderNav'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CHeaderTextProps extends HTMLAttributes {\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n}\n\nexport const CHeaderText = forwardRef(\n ({ children, className, ...rest }, ref) => {\n const _className = classNames('header-text', className)\n\n return (\n \n {children}\n \n )\n },\n)\n\nCHeaderText.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCHeaderText.displayName = 'CHeaderText'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CHeaderTogglerProps extends HTMLAttributes {\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n}\n\nexport const CHeaderToggler = forwardRef(\n ({ children, className, ...rest }, ref) => {\n const _className = classNames('header-toggler', className)\n\n return (\n \n )\n },\n)\n\nCHeaderToggler.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCHeaderToggler.displayName = 'CHeaderToggler'\n","import React, { forwardRef, ImgHTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CImageProps extends ImgHTMLAttributes {\n /**\n * Set the horizontal aligment.\n */\n align?: 'start' | 'center' | 'end'\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Make image responsive.\n */\n fluid?: boolean\n /**\n * Make image rounded.\n */\n rounded?: boolean\n /**\n * Give an image a rounded 1px border appearance.\n */\n thumbnail?: boolean\n}\n\nexport const CImage = forwardRef(\n ({ align, className, fluid, rounded, thumbnail, ...rest }, ref) => {\n const _className = classNames(\n {\n [`float-${align}`]: align && (align === 'start' || align === 'end'),\n 'd-block mx-auto': align && align === 'center',\n 'img-fluid': fluid,\n rounded: rounded,\n 'img-thumbnail': thumbnail,\n },\n className,\n )\n return ![]()
\n },\n)\n\nCImage.propTypes = {\n align: PropTypes.oneOf(['start', 'center', 'end']),\n className: PropTypes.string,\n fluid: PropTypes.bool,\n rounded: PropTypes.bool,\n thumbnail: PropTypes.bool,\n}\n\nCImage.displayName = 'CImage'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CListGroupProps extends HTMLAttributes {\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: string | ElementType\n /**\n * Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., ``).\n */\n flush?: boolean\n /**\n * Specify a layout type.\n */\n layout?:\n | 'horizontal'\n | 'horizontal-sm'\n | 'horizontal-md'\n | 'horizontal-lg'\n | 'horizontal-xl'\n | 'horizontal-xxl'\n}\n\nexport const CListGroup = forwardRef(\n ({ children, className, component: Component = 'ul', flush, layout }, ref) => {\n const _className = classNames(\n 'list-group',\n {\n 'list-group-flush': flush,\n [`list-group-${layout}`]: layout,\n },\n className,\n )\n\n return (\n \n {children}\n \n )\n },\n)\n\nCListGroup.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n component: PropTypes.elementType,\n flush: PropTypes.bool,\n layout: PropTypes.oneOf([\n 'horizontal',\n 'horizontal-sm',\n 'horizontal-md',\n 'horizontal-lg',\n 'horizontal-xl',\n 'horizontal-xxl',\n ]),\n}\n\nCListGroup.displayName = 'CListGroup'\n","import React, { ElementType, HTMLAttributes, forwardRef } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport { Colors, colorPropType } from '../Types'\nimport { CLink } from '../link/CLink'\n\nexport interface CListGroupItemProps\n extends HTMLAttributes {\n /**\n * Toggle the active state for the component.\n */\n active?: boolean\n /**\n * A string of all className you want applied to the component.\n */\n className?: string\n /**\n * Sets the color context of the component to one of CoreUI’s themed colors.\n *\n * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string\n */\n color?: Colors\n /**\n * Toggle the disabled state for the component.\n */\n disabled?: boolean\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: string | ElementType\n}\n\nexport const CListGroupItem = forwardRef<\n HTMLLIElement | HTMLAnchorElement | HTMLButtonElement,\n CListGroupItemProps\n>(({ children, active, className, disabled, color, component = 'li', ...rest }, ref) => {\n const _className = classNames(\n 'list-group-item',\n {\n [`list-group-item-${color}`]: color,\n 'list-group-item-action': component === 'a' || component === 'button',\n active,\n disabled,\n },\n className,\n )\n\n const Component = component === 'a' || component === 'button' ? CLink : component\n\n rest = {\n ...((component === 'a' || component === 'button') && {\n active,\n disabled,\n component,\n ref: ref,\n }),\n ...(active && { 'aria-current': true }),\n ...(disabled && { 'aria-disabled': true }),\n ...rest,\n }\n\n return (\n \n {children}\n \n )\n})\n\nCListGroupItem.propTypes = {\n active: PropTypes.bool,\n children: PropTypes.node,\n className: PropTypes.string,\n color: colorPropType,\n component: PropTypes.elementType,\n disabled: PropTypes.bool,\n}\n\nCListGroupItem.displayName = 'CListGroupItem'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CModalContentProps extends HTMLAttributes {\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n}\n\nexport const CModalContent = forwardRef(\n ({ children, className, ...rest }, ref) => {\n const _className = classNames('modal-content', className)\n\n return (\n {\n /**\n * Align the modal in the center or top of the screen.\n */\n alignment?: 'top' | 'center'\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n /**\n * Set modal to covers the entire user viewport.\n */\n fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n /**\n * Does the modal dialog itself scroll, or does the whole dialog scroll within the window.\n */\n scrollable?: boolean\n /**\n * Size the component small, large, or extra large.\n */\n size?: 'sm' | 'lg' | 'xl'\n}\n\nexport const CModalDialog = forwardRef(\n ({ children, alignment, className, fullscreen, scrollable, size, ...rest }, ref) => {\n const _className = classNames(\n 'modal-dialog',\n {\n 'modal-dialog-centered': alignment === 'center',\n [typeof fullscreen === 'boolean'\n ? 'modal-fullscreen'\n : `modal-fullscreen-${fullscreen}-down`]: fullscreen,\n 'modal-dialog-scrollable': scrollable,\n [`modal-${size}`]: size,\n },\n className,\n )\n\n return (\n {\n /**\n * Align the modal in the center or top of the screen.\n */\n alignment?: 'top' | 'center'\n /**\n * Apply a backdrop on body while modal is open.\n */\n backdrop?: boolean | 'static'\n /**\n * A string of all className you want applied to the base component.\n */\n className?: string\n /**\n * @ignore\n */\n duration?: number\n /**\n * Set modal to covers the entire user viewport.\n */\n fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'\n /**\n * Closes the modal when escape key is pressed.\n */\n keyboard?: boolean\n /**\n * Callback fired when the component requests to be closed.\n */\n onClose?: () => void\n /**\n * Callback fired when the component requests to be closed.\n */\n onClosePrevented?: () => void\n /**\n * Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.\n */\n onShow?: () => void\n /**\n * Generates modal using createPortal.\n */\n portal?: boolean\n /**\n * Create a scrollable modal that allows scrolling the modal body.\n */\n scrollable?: boolean\n /**\n * Size the component small, large, or extra large.\n */\n size?: 'sm' | 'lg' | 'xl'\n /**\n * Remove animation to create modal that simply appear rather than fade in to view.\n */\n transition?: boolean\n /*\n * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false\n */\n unmountOnClose?: boolean\n /**\n * Toggle the visibility of modal component.\n */\n visible?: boolean\n}\n\ninterface ModalContextProps {\n visible?: boolean\n setVisible: React.Dispatch>\n}\n\nexport const CModalContext = createContext({} as ModalContextProps)\n\nexport const CModal = forwardRef(\n (\n {\n children,\n alignment,\n backdrop = true,\n className,\n duration = 150,\n fullscreen,\n keyboard = true,\n onClose,\n onClosePrevented,\n onShow,\n portal = true,\n scrollable,\n size,\n transition = true,\n unmountOnClose = true,\n visible,\n },\n ref,\n ) => {\n const modalRef = useRef(null)\n const modalContentRef = useRef(null)\n const forkedRef = useForkedRef(ref, modalRef)\n\n const [_visible, setVisible] = useState(visible)\n const [staticBackdrop, setStaticBackdrop] = useState(false)\n\n useEffect(() => {\n setVisible(visible)\n }, [visible])\n\n const contextValues = {\n visible: _visible,\n setVisible,\n }\n\n useEffect(() => {\n modalRef.current && modalRef.current.addEventListener('click', handleClickOutside)\n modalRef.current && modalRef.current.addEventListener('keyup', handleKeyDown)\n\n return () => {\n modalRef.current && modalRef.current.removeEventListener('click', handleClickOutside)\n modalRef.current && modalRef.current.removeEventListener('keyup', handleKeyDown)\n }\n }, [_visible])\n\n const handleDismiss = () => {\n if (backdrop === 'static') {\n return setStaticBackdrop(true)\n }\n return onClose && onClose()\n }\n\n useLayoutEffect(() => {\n onClosePrevented && onClosePrevented()\n setTimeout(() => setStaticBackdrop(false), duration)\n }, [staticBackdrop])\n\n const getTransitionClass = (state: string) => {\n return state === 'entering'\n ? 'd-block'\n : state === 'entered'\n ? 'show d-block'\n : state === 'exiting'\n ? 'd-block'\n : ''\n }\n const _className = classNames(\n 'modal',\n {\n 'modal-static': staticBackdrop,\n fade: transition,\n },\n className,\n )\n\n // Set focus to modal after open\n useLayoutEffect(() => {\n if (_visible) {\n document.body.classList.add('modal-open')\n setTimeout(\n () => {\n modalRef.current?.focus()\n },\n !transition ? 0 : duration,\n )\n } else {\n document.body.classList.remove('modal-open')\n }\n return () => document.body.classList.remove('modal-open')\n }, [_visible])\n\n const handleClickOutside = (event: Event) => {\n if (\n modalContentRef.current &&\n !modalContentRef.current.contains(event.target as HTMLElement)\n ) {\n handleDismiss()\n }\n }\n\n const handleKeyDown = useCallback(\n (event) => {\n if (event.key === 'Escape' && keyboard) {\n return handleDismiss()\n }\n },\n [modalRef, handleDismiss],\n )\n\n const modal = (ref?: React.Ref, transitionClass?: string) => {\n return (\n \n \n \n {children} \n \n
\n \n )\n }\n\n return (\n <>\n \n setSelectedStartDate(value)}\n //minimumDate={persianToday}\n //calendarClassName=\"fullwidth\"\n shouldHighlightWeekends\n locale='fa'\n />\n
\n \n \n setSelectedEndDate(value)}\n //minimumDate={persianToday}\n //calendarClassName=\"fullwidth\"\n shouldHighlightWeekends\n locale='fa'\n />\n
\n \n \n setSelectedDeadLineDate(value)}\n //minimumDate={persianToday}\n //calendarClassName=\"fullwidth\"\n shouldHighlightWeekends\n locale='fa'\n />\n
\n \n \n )\n },\n)\n\nCFormTextarea.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n invalid: PropTypes.bool,\n plainText: PropTypes.bool,\n valid: PropTypes.bool,\n}\n\nCFormTextarea.displayName = 'CFormTextarea'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CInputGroupProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCInputGroup.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n size: PropTypes.oneOf(['sm', 'lg']),\n}\n\nCInputGroup.displayName = 'CInputGroup'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CInputGroupTextProps extends HTMLAttributes{children}
\n )\n } else {\n content = children\n }\n\n return (\n \n {content}\n
\n )\n },\n)\n\nCHeader.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n container: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid'>([\n 'sm',\n 'md',\n 'lg',\n 'xl',\n 'xxl',\n 'fluid',\n ]),\n ]),\n position: PropTypes.oneOf(['fixed', 'sticky']),\n}\n\nCHeader.displayName = 'CHeader'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CHeaderBrandProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCModalContent.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCModalContent.displayName = 'CModalContent'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CModalDialogProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCModalDialog.propTypes = {\n alignment: PropTypes.oneOf(['top', 'center']),\n children: PropTypes.node,\n className: PropTypes.string,\n fullscreen: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),\n ]),\n scrollable: PropTypes.bool,\n size: PropTypes.oneOf(['sm', 'lg', 'xl']),\n}\n\nCModalDialog.displayName = 'CModalDialog'\n","import React, {\n createContext,\n forwardRef,\n HTMLAttributes,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport { Transition } from 'react-transition-group'\n\nimport { useForkedRef } from '../../utils/hooks'\n\nimport { CBackdrop } from '../backdrop/CBackdrop'\nimport { CModalContent } from './CModalContent'\nimport { CModalDialog } from './CModalDialog'\n\nexport interface CModalProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCModalBody.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCModalBody.displayName = 'CModalBody'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CModalFooterProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCModalFooter.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCModalFooter.displayName = 'CModalFooter'\n","import React, { forwardRef, HTMLAttributes, useContext } from 'react'\nimport PropTypes from 'prop-types'\nimport { CModalContext } from './CModal'\nimport { CCloseButton } from '../close-button/CCloseButton'\nimport classNames from 'classnames'\n\nexport interface CModalHeaderProps extends HTMLAttributes\n {children}\n {closeButton && setVisible(false)} />}\n
\n )\n },\n)\n\nCModalHeader.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n closeButton: PropTypes.bool,\n}\n\nCModalHeader.displayName = 'CModalHeader'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CModalTitleProps extends HTMLAttributes- \n {children}\n
- \n
{children}
\n )\n } else {\n content = children\n }\n\n return (\n {title}
\n {content}
\n \n {value ? (\n \n {children}\n \n ) : (\n children\n )}\n
\n )\n },\n)\n\nCProgress.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n height: PropTypes.number,\n thin: PropTypes.bool,\n value: PropTypes.number,\n white: PropTypes.bool,\n}\n\nCProgress.displayName = 'CProgress'\n","import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport { useForkedRef } from '../../utils/hooks'\nimport { CBackdrop } from '../backdrop/CBackdrop'\n\nexport interface CSidebarProps extends HTMLAttributes\n {children}\n
\n {typeof window !== 'undefined' &&\n mobile &&\n createPortal(\n \n {children}\n
\n )\n },\n)\n\nCOffcanvasBody.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCOffcanvasBody.displayName = 'COffcanvasBody'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface COffcanvasHeaderProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCOffcanvasHeader.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCOffcanvasHeader.displayName = 'COffcanvasHeader'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface COffcanvasTitleProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCSidebarBrand.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCSidebarBrand.displayName = 'CSidebarBrand'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CSidebarFooterProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCSidebarFooter.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCSidebarFooter.displayName = 'CSidebarFooter'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CSidebarTogglerProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCSidebarHeader.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCSidebarHeader.displayName = 'CSidebarHeader'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport { Colors, colorPropType } from '../Types'\n\nexport interface CSpinnerProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCTabContent.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCTabContent.displayName = 'CTabContent'\n","import React, { HTMLAttributes, forwardRef } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport { Transition } from 'react-transition-group'\n\nexport interface CTabPaneProps extends HTMLAttributes\n {children}\n
\n )\n }}\n \n {children}\n
\n )\n },\n)\n\nCToastBody.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCToastBody.displayName = 'CToastBody'\n","import React, { ElementType, forwardRef, useContext } from 'react'\nimport PropTypes from 'prop-types'\nimport { CToastContext } from './CToast'\nimport { CCloseButton, CCloseButtonProps } from '../close-button/CCloseButton'\n\nexport interface CToastCloseProps extends CCloseButtonProps {\n /**\n * Component used for the root node. Either a string to use a HTML element or a component.\n */\n component?: string | ElementType\n}\n\nexport const CToastClose = forwardRef\n {children}\n {closeButton &&
\n )\n },\n)\n\nCToastHeader.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n closeButton: PropTypes.bool,\n}\n\nCToastHeader.displayName = 'CToastHeader'\n","import React, { forwardRef, HTMLAttributes, useEffect, useState, useRef, ReactElement } from 'react'\nimport PropTypes from 'prop-types'\nimport { createPortal } from 'react-dom'\nimport classNames from 'classnames'\nexport interface CToasterProps extends HTMLAttributes\n {children}\n {toasts.map((toast) => React.cloneElement(toast, { visible: true }))}\n
\n ) : null\n }\n\n return typeof window !== 'undefined' && placement\n ? createPortal(toaster(ref), document.body)\n : toaster(ref)\n },\n)\n\nCToaster.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n placement: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.oneOf([\n 'top-start',\n 'top-center',\n 'top-end',\n 'middle-start',\n 'middle-center',\n 'middle-end',\n 'bottom-start',\n 'bottom-center',\n 'bottom-end',\n ]),\n ]),\n push: PropTypes.any,\n}\n\nCToaster.displayName = 'CToaster'\n","import React, { FC, ReactElement, ReactNode, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\nimport { Manager, Popper, Reference } from 'react-popper'\nimport { Transition } from 'react-transition-group'\n\n// import { CTooltipContent } from './CTooltipContent'\nimport { Triggers, triggerPropType } from '../Types'\n\nexport interface CTooltipProps {\n children: ReactElement\n /**\n * Content node for your component.\n */\n content: ReactNode | string\n /**\n * Callback fired when the component requests to be hidden.\n */\n onHide?: () => void\n /**\n * Callback fired when the component requests to be shown.\n */\n onShow?: () => void\n /**\n * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.\n *\n * @type 'hover' | 'focus' | 'click'\n */\n trigger?: Triggers | Triggers[]\n /**\n * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.\n */\n placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'\n /**\n * Toggle the visibility of popover component.\n */\n visible?: boolean\n}\n\nexport const CTooltip: FC{content}
\n \n )}\n \n {value &&
\n {action}\n {value}
}\n {title && {title}
}\n {value}
}\n {title && {title}
}\n \n {icon}\n
\n )}\n {value && (\n \n {value}\n
\n )}\n {title && (\n \n {title}\n
\n )}\n {value.value}
\n {value.title}
\n {title}
\n )}\n {value && {value}
}\n {chart}\n {icon}
\n \n
\n {value}
\n {title}
\n \n \n 
\n \n
\n )\n } else {\n return (\n \n \n
\n )\n }\n\n } else if (mediaType === 'audio') {\n return \n } else if (mediaType === 'video') {\n return \n } else if (mediaType === 'embed') {\n return \n } else if (mediaType === 'hr') {\n return
\n } else {\n return \n }\n\n}\n\nconst entityToHTML = (options) => (entity, originalText) => {\n\n const { entityExportFn } = options\n const entityType = entity.type.toLowerCase()\n\n if (entityExportFn) {\n const customOutput = entityExportFn(entity, originalText)\n if (customOutput) {\n return customOutput\n }\n }\n\n if (entityType === 'link') {\n let { class: className, ...nodeAttrAsProps } = entity.data.nodeAttributes || {}\n nodeAttrAsProps.className = className\n return \n }\n\n}\n\nconst styleToHTML = (options) => (style) => {\n\n const unitExportFn = options.unitExportFn || defaultUnitExportFn\n\n if (options.styleExportFn) {\n const customOutput = options.styleExportFn(style, options)\n if (customOutput) {\n return customOutput\n }\n }\n\n style = style.toLowerCase()\n\n if (style === 'strikethrough') {\n return \n } else if (style === 'superscript') {\n return \n } else if (style === 'subscript') {\n return \n } else if (style.indexOf('color-') === 0) {\n return \n } else if (style.indexOf('bgcolor-') === 0) {\n return \n } else if (style.indexOf('fontsize-') === 0) {\n return \n } else if (style.indexOf('lineheight-') === 0) {\n return \n } else if (style.indexOf('letterspacing-') === 0) {\n return \n } else if (style.indexOf('fontfamily-') === 0) {\n let fontFamily = options.fontFamilies.find((item) => item.name.toLowerCase() === getStyleValue(style))\n if (!fontFamily) return\n return \n }\n\n}\n\nconst blockToHTML = (options) => (block) => {\n\n const { blockExportFn, contentState } = options\n\n if (blockExportFn) {\n const customOutput = blockExportFn(contentState, block)\n if (customOutput) {\n return customOutput\n }\n }\n\n let blockStyle = ''\n\n const blockType = block.type.toLowerCase()\n const { textAlign, textIndent, nodeAttributes = {} } = block.data\n const attributeString = spreadNodeAttributes(nodeAttributes)\n\n if (textAlign || textIndent) {\n\n blockStyle = ' style=\"'\n\n if (textAlign) {\n blockStyle += `text-align:${textAlign};`\n }\n\n if (textIndent && !isNaN(textIndent) && textIndent > 0) {\n blockStyle += `text-indent:${textIndent * 2}em;`\n }\n\n blockStyle += '\"'\n\n }\n\n if (blockType === 'atomic') {\n return convertAtomicBlock(block, contentState, nodeAttributes)\n } else if (blockType === 'code-block') {\n\n const previousBlock = contentState.getBlockBefore(block.key)\n const nextBlock = contentState.getBlockAfter(block.key)\n const previousBlockType = previousBlock && previousBlock.getType()\n const nextBlockType = nextBlock && nextBlock.getType()\n\n let start = ''\n let end = ''\n\n if (previousBlockType !== 'code-block') {\n start = `
`\n } else {\n start = ''\n }\n\n if (nextBlockType !== 'code-block') {\n end = ''\n } else {\n end = ''\n }\n\n return { start, end }\n\n } else if (blocks[blockType]) {\n return {\n start: `<${blocks[blockType]}${blockStyle}${attributeString}>`,\n end: ``\n }\n } else if (blockType === 'unordered-list-item') {\n return {\n start: `
onClick()} className={'bf-switch ' + className + (active ? ' active' : '')}>
\n )\n\n}\n","import React from 'react'\n\nexport default (lang, editor) => [\n {\n key: 'undo',\n title: lang.controls.undo,\n text: ,\n type: 'editor-method',\n command: 'undo'\n }, {\n key: 'redo',\n title: lang.controls.redo,\n text: ,\n type: 'editor-method',\n command: 'redo'\n }, {\n key: 'remove-styles',\n title: lang.controls.removeStyles,\n text: ,\n type: 'editor-method',\n command: 'removeSelectionInlineStyles'\n }, {\n key: 'hr',\n title: lang.controls.hr,\n text: ,\n type: 'editor-method',\n command: 'insertHorizontalLine'\n }, {\n key: 'bold',\n title: lang.controls.bold,\n text: ,\n type: 'inline-style',\n command: 'bold'\n }, {\n key: 'italic',\n title: lang.controls.italic,\n text: ,\n type: 'inline-style',\n command: 'italic'\n }, {\n key: 'underline',\n title: lang.controls.underline,\n text: ,\n type: 'inline-style',\n command: 'underline'\n }, {\n key: 'strike-through',\n title: lang.controls.strikeThrough,\n text: ,\n type: 'inline-style',\n command: 'strikethrough',\n }, {\n key: 'superscript',\n title: lang.controls.superScript,\n text: ,\n type: 'inline-style',\n command: 'superscript'\n }, {\n key: 'subscript',\n title: lang.controls.subScript,\n text: ,\n type: 'inline-style',\n command: 'subscript'\n }, {\n key: 'headings',\n title: lang.controls.headings,\n type: 'headings',\n }, {\n key: 'blockquote',\n title: lang.controls.blockQuote,\n text: ,\n type: 'block-type',\n command: 'blockquote',\n }, {\n key: 'code',\n title: lang.controls.code,\n text: ,\n type: 'block-type',\n command: 'code-block'\n }, {\n key: 'list-ul',\n title: lang.controls.unorderedList,\n text: ,\n type: 'block-type',\n command: 'unordered-list-item'\n }, {\n key: 'list-ol',\n title: lang.controls.orderedList,\n text: ,\n type: 'block-type',\n command: 'ordered-list-item'\n }, {\n key: 'link',\n title: lang.controls.link,\n type: 'link'\n }, {\n key: 'text-color',\n title: lang.controls.color,\n type: 'text-color'\n }, {\n key: 'line-height',\n title: lang.controls.lineHeight, \n type: 'line-height'\n }, {\n key: 'letter-spacing',\n title: lang.controls.letterSpacing,\n type: 'letter-spacing'\n }, {\n key: 'text-indent',\n title: lang.controls.textIndent,\n type: 'text-indent'\n },{\n key: 'font-size',\n title: lang.controls.fontSize,\n type: 'font-size'\n }, {\n key: 'font-family',\n title: lang.controls.fontFamily,\n type: 'font-family'\n }, {\n key: 'text-align',\n title: lang.controls.textAlign,\n type: 'text-align'\n }, {\n key: 'media',\n title: lang.controls.media,\n text: ,\n type: 'media'\n }, {\n key: 'emoji',\n title: lang.controls.emoji,\n text: ,\n type: 'emoji'\n }, {\n key: 'clear',\n title: lang.controls.clear,\n text: ,\n type: 'editor-method',\n command: 'clearEditorContent'\n }, {\n key: 'fullscreen',\n title: editor.state.isFullscreen ? lang.controls.exitFullscreen : lang.controls.fullscreen,\n text: ,\n type: 'editor-method',\n command: 'toggleFullscreen'\n }, {\n key: 'modal',\n type: 'modal',\n }, {\n key: 'button',\n type: 'button',\n }, {\n key: 'dropdown',\n type: 'dropdown',\n }, {\n key: 'component',\n type: 'component',\n }\n]\n\nexport const imageControlItems = {\n 'float-left': {\n text: ,\n command: 'setImageFloat|left'\n },\n 'float-right': {\n text: ,\n command: 'setImageFloat|right'\n },\n 'align-left': {\n text: ,\n command: 'setImageAlignment|left'\n },\n 'align-center': {\n text: ,\n command: 'setImageAlignment|center'\n },\n 'align-right': {\n text: ,\n command: 'setImageAlignment|right'\n },\n 'size': {\n text: ,\n command: 'toggleSizeEditor'\n },\n 'link': {\n text: ,\n command: 'toggleLinkEditor'\n },\n 'remove': {\n text: ,\n command: 'removeImage'\n }\n}","import './style.scss'\nimport React from 'react'\nimport { ContentUtils } from 'braft-utils'\nimport Switch from 'components/common/Switch'\nimport { imageControlItems } from 'configs/controls'\n\nexport default class Image extends React.Component {\n\n state = {\n toolbarVisible: false,\n toolbarOffset: 0,\n linkEditorVisible: false,\n sizeEditorVisible: false,\n tempLink: null,\n tempWidth: null,\n tempHeight: null\n }\n initialLeft\n initialTop\n initialWidth\n initialHeight\n reSizeType\n // 图片宽高比\n zoom\n\n changeSize = e => {\n let type = this.reSizeType\n if(!this.initialLeft){\n this.initialLeft = e.screenX\n this.initialTop = e.screenY\n }\n if(type === 'rightbottom'){\n this.initialHeight += e.screenY-this.initialTop\n this.initialWidth += e.screenX-this.initialLeft\n }\n if(type === 'leftbottom'){\n this.initialHeight += e.screenY-this.initialTop\n this.initialWidth += -e.screenX+this.initialLeft\n }\n\n\n this.initialLeft = e.screenX\n this.initialTop = e.screenY\n }\n\n moveImage = (e) => {\n this.changeSize(e)\n this.setState({\n tempWidth: Math.abs(this.initialWidth),\n tempHeight: Math.abs(this.initialHeight)\n })\n }\n\n upImage = () => {\n const {imageEqualRatio} = this.props\n if (imageEqualRatio) {\n this.confirmImageSizeEqualRatio()\n } else {\n this.confirmImageSize()\n }\n document.removeEventListener('mousemove',this.moveImage)\n document.removeEventListener('mouseup',this.upImage)\n }\n\n repareChangeSize = type => (e) => {\n this.reSizeType = type\n const imageRect = this.imageElement.getBoundingClientRect()\n this.initialLeft = this.initialTop = 0\n this.initialWidth = imageRect.width\n this.initialHeight = imageRect.height\n this.zoom = imageRect.width / imageRect.height\n e.preventDefault()\n document.addEventListener('mousemove', this.moveImage)\n document.addEventListener('mouseup', this.upImage)\n }\n\n render () {\n\n const { mediaData, language, imageControls, imageResizable } = this.props\n const { toolbarVisible, toolbarOffset, linkEditorVisible, sizeEditorVisible, tempWidth, tempHeight } = this.state\n const blockData = this.props.block.getData()\n\n let float = blockData.get('float')\n let alignment = blockData.get('alignment')\n let { url, link, link_target, width, height, meta } = mediaData\n let imageStyles = {}\n let clearFix = false\n\n if (float) {\n alignment = null\n } else if (alignment === 'left') {\n imageStyles.float = 'left'\n clearFix = true\n } else if (alignment === 'right') {\n imageStyles.float = 'right'\n clearFix = true\n } else if (alignment === 'center') {\n imageStyles.textAlign = 'center'\n } else {\n imageStyles.float = 'left'\n clearFix = true\n }\n\n const renderedControlItems = imageControls.map((item, index) => {\n\n if (typeof item === 'string' && imageControlItems[item]) {\n return (\n this.executeCommand(imageControlItems[item].command)}>\n {imageControlItems[item].text}\n \n )\n } else if (item && (item.render || item.text)) {\n return item.render ? item.render(mediaData, this.props.block) : item.onClick && this.executeCommand(item.onClick)}>{item.text}\n } else {\n return null\n }\n\n })\n\n return (\n \n this.mediaEmbederInstance = instance}\n className='bf-image'\n >\n {toolbarVisible ? (\n this.toolbarElement = instance}\n data-float={float}\n data-align={alignment}\n className='bf-media-toolbar'\n >\n {linkEditorVisible ? (\n
\n ) : null}\n \n
\n ) : null}\n {sizeEditorVisible ? (\n \n \n \n
\n \n this.setImageLinkTarget(link_target)}\n />\n \n
\n \n
\n ) : null}\n {renderedControlItems}\n \n \n \n \n \n
\n \n this.imageElement = instance}\n src={url}\n width={width}\n height={height}\n {...meta}\n />\n {toolbarVisible && imageResizable ?\n
\n \n {clearFix && }\n \n )\n\n }\n\n lockEditor () {\n this.props.editor.lockOrUnlockEditor(true)\n }\n\n unlockEditor () {\n this.props.editor.lockOrUnlockEditor(false)\n }\n\n calcToolbarOffset () {\n\n const { getContainerNode, containerNode } = this.props\n const container = getContainerNode ? getContainerNode() : containerNode\n\n if (!container) {\n return 0\n }\n\n const viewRect = container.querySelector('.bf-content').getBoundingClientRect()\n const toolbarRect = this.toolbarElement.getBoundingClientRect()\n const imageRect = this.imageElement.getBoundingClientRect()\n\n const right = viewRect.right - (imageRect.right - imageRect.width / 2 + toolbarRect.width / 2)\n const left = (imageRect.left + imageRect.width / 2 - toolbarRect.width / 2) - viewRect.left\n\n if (right < 10) {\n return right - 10\n } else if (left < 10) {\n return left * -1 + 10\n } else {\n return 0\n }\n\n }\n\n preventDragEvent = (event) => {\n event.stopPropagation()\n event.preventDefault()\n }\n\n handleDragStart = () => {\n\n if (this.props.editor.editorProps.readOnly || this.props.editor.editorProps.disabled) {\n return false\n }\n\n window.__BRAFT_DRAGING__IMAGE__ = {\n block: this.props.block,\n mediaData: {\n type: 'IMAGE',\n ...this.props.mediaData\n }\n }\n\n this.setState({\n toolbarVisible: false\n }, () => {\n this.unlockEditor()\n })\n\n return true\n\n }\n\n handleDragEnd = () => {\n\n window.__BRAFT_DRAGING__IMAGE__ = null\n return false\n\n }\n\n executeCommand = (command) => {\n\n if (typeof command === 'string') {\n const [method, param] = command.split('|')\n this[method] && this[method](param)\n } else if (typeof command === 'function') {\n command(this.props.block, this.props.mediaData, this.props.editor.getValue())\n }\n\n }\n\n removeImage = () => {\n this.props.editor.setValue(ContentUtils.removeBlock(this.props.editor.getValue(), this.props.block))\n this.unlockEditor()\n }\n\n toggleLinkEditor = () => {\n this.setState({\n linkEditorVisible: !this.state.linkEditorVisible,\n sizeEditorVisible: false\n })\n }\n\n toggleSizeEditor = () => {\n this.setState({\n linkEditorVisible: false,\n sizeEditorVisible: !this.state.sizeEditorVisible\n })\n }\n\n handleLinkInputKeyDown = (e) => {\n\n if (e.keyCode === 13) {\n this.confirmImageLink()\n } else {\n return\n }\n }\n\n setImageLink = (e) => {\n this.setState({ tempLink: e.currentTarget.value })\n return\n }\n\n setImageLinkTarget (link_target) {\n\n const hookReturns = this.props.hooks('set-image-link-target', link_target)(link_target)\n\n if (hookReturns === false) {\n return false\n }\n\n if (typeof hookReturns === 'string') {\n link_target = hookReturns\n }\n\n link_target = link_target === '_blank' ? '' : '_blank'\n this.props.editor.setValue(ContentUtils.setMediaData(this.props.editor.getValue(), this.props.entityKey, { link_target }))\n window.setImmediate(this.props.editor.forceRender)\n }\n\n confirmImageLink = () => {\n\n let { tempLink: link } = this.state\n const hookReturns = this.props.hooks('set-image-link', link)(link)\n\n if (hookReturns === false) {\n return false\n }\n\n if (typeof hookReturns === 'string') {\n link = hookReturns\n }\n\n if (link !== null) {\n this.props.editor.setValue(ContentUtils.setMediaData(this.props.editor.getValue(), this.props.entityKey, { link }))\n window.setImmediate(this.props.editor.forceRender)\n }\n }\n\n handleSizeInputKeyDown = (e) => {\n if (e.keyCode === 13) {\n this.confirmImageSize()\n } else {\n return\n }\n }\n\n setImageWidth = ({ currentTarget }) => {\n\n let { value } = currentTarget\n\n value && !isNaN(value) && (value = value + 'px')\n\n this.setState({\n tempWidth: value\n })\n\n return\n }\n\n setImageHeight = ({ currentTarget }) => {\n\n let { value } = currentTarget\n\n value && !isNaN(value) && (value = value + 'px')\n\n this.setState({\n tempHeight: value\n })\n\n return\n }\n\n confirmImageSize = () => {\n\n const { tempWidth: width, tempHeight: height } = this.state\n let newImageSize = {}\n\n width !== null && (newImageSize.width = width)\n height !== null && (newImageSize.height = height)\n\n const hookReturns = this.props.hooks('set-image-size', newImageSize)(newImageSize)\n\n if (hookReturns === false) {\n return false\n }\n\n if (hookReturns && (hookReturns.width || hookReturns.height)) {\n newImageSize = hookReturns\n }\n\n this.props.editor.setValue(ContentUtils.setMediaData(this.props.editor.getValue(), this.props.entityKey, newImageSize))\n window.setImmediate(this.props.editor.forceRender)\n }\n\n confirmImageSizeEqualRatio = () => {\n\n const { tempWidth: width, tempHeight: height } = this.state\n let equalWidth\n let equalHeight\n let newImageSize = {}\n // 宽度过大 图片等比缩放\n if (width / height > this.zoom) {\n equalWidth = Math.floor(height * this.zoom)\n this.setState({\n tempWidth: equalWidth\n })\n equalHeight = height\n } else if (width / height < this.zoom) {\n equalHeight = Math.floor(width / this.zoom)\n this.setState({\n tempHeight: equalHeight\n })\n equalWidth = width\n }\n equalWidth !== null && (newImageSize.width = equalWidth)\n equalHeight !== null && (newImageSize.height = equalHeight)\n\n const hookReturns = this.props.hooks('set-image-size', newImageSize)(newImageSize)\n\n if (hookReturns === false) {\n return false\n }\n\n if (hookReturns && (hookReturns.width || hookReturns.height)) {\n newImageSize = hookReturns\n }\n\n this.props.editor.setValue(ContentUtils.setMediaData(this.props.editor.getValue(), this.props.entityKey, newImageSize))\n window.setImmediate(this.props.editor.forceRender)\n }\n\n setImageFloat = (float) => {\n\n const hookReturns = this.props.hooks('set-image-float', float)(float)\n\n if (hookReturns === false) {\n return false\n }\n\n if (typeof hookReturns === 'string') {\n float = hookReturns\n }\n\n this.props.editor.setValue(ContentUtils.setMediaPosition(this.props.editor.getValue(), this.props.block, { float }))\n this.unlockEditor()\n }\n\n setImageAlignment = (alignment) => {\n\n const hookReturns = this.props.hooks('set-image-alignment', alignment)(alignment)\n\n if (hookReturns === false) {\n return false\n }\n\n if (typeof hookReturns === 'string') {\n alignment = hookReturns\n }\n\n this.props.editor.setValue(ContentUtils.setMediaPosition(this.props.editor.getValue(), this.props.block, { alignment }))\n this.unlockEditor()\n }\n\n showToolbar = (event) => {\n\n if (this.props.editor.editorProps.readOnly || this.props.editor.editorProps.disabled) {\n return false\n }\n\n event.preventDefault()\n\n if (!this.state.toolbarVisible) {\n this.setState({\n toolbarVisible: true\n }, () => {\n this.lockEditor()\n this.setState({ toolbarOffset: this.calcToolbarOffset() })\n })\n }\n }\n\n hideToolbar = (event) => {\n\n event.preventDefault()\n\n this.setState({\n toolbarVisible: false\n }, () => {\n this.unlockEditor()\n // this.props.editor.requestFocus()\n })\n }\n\n}\n","import './style.scss'\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { BaseUtils } from 'braft-utils'\n\nexport default class Modal extends React.Component {\n\n constructor (props) {\n\n super(props)\n this.active = false\n this.componentId = 'BRAFT-MODAL-' + BaseUtils.UniqueIndex()\n\n }\n\n static defaultProps = {\n showFooter: true,\n closeOnBlur: true\n }\n\n componentDidMount () {\n\n if (this.props.visible) {\n this.active = true\n this.renderComponent(this.props)\n }\n\n }\n\n componentWillReceiveProps (next) {\n\n if (this.props.visible && !next.visible) {\n this.unrenderComponent()\n } else if (this.props.visible || next.visible) {\n this.active = true\n this.renderComponent(next)\n }\n\n }\n\n render () {\n return null\n }\n\n handleTransitionEnd = () => {\n\n if (!this.rootElement || !this.rootElement.classList) {\n return false\n }\n\n if (!this.rootElement.classList.contains('active')) {\n ReactDOM.unmountComponentAtNode(this.rootElement) && this.rootElement.parentNode.removeChild(this.rootElement)\n }\n\n }\n\n unrenderComponent () {\n this.active = false\n this.activeId && window.clearImmediate(this.activeId)\n if (this.rootElement && this.rootElement.classList) {\n this.rootElement.classList.remove('active')\n }\n }\n\n renderComponent (props) {\n\n if (!this.active) {\n return false\n }\n\n let { title, className, width, height, children, component, confirmable, showFooter, showCancel, showConfirm, showClose, cancelText, confirmText, bottomText, language } = props\n\n typeof showCancel === 'undefined' && (showCancel = true)\n typeof showClose === 'undefined' && (showClose = true)\n typeof showConfirm === 'undefined' && (showConfirm = true)\n typeof showFooter === 'undefined' && (showFooter = true)\n\n const childComponent = (\n \n \n
\n )\n\n this.rootElement = document.querySelector('#' + this.componentId)\n\n if (!this.rootElement) {\n this.rootElement = document.createElement('div')\n this.rootElement.id = this.componentId\n this.rootElement.className = 'bf-modal-root'\n document.body.appendChild(this.rootElement)\n }\n\n ReactDOM.render(childComponent, this.rootElement)\n\n this.activeId = window.setImmediate(() => {\n this.rootElement.classList.add('active')\n })\n\n }\n\n handleMouseDown = (event) => {\n\n const tagName = event.target.tagName.toLowerCase()\n\n if (tagName === 'input' || tagName === 'textarea') {\n return false\n }\n\n event.preventDefault()\n\n }\n\n handleCancel = () => {\n this.props.closeOnCancel && this.close()\n this.props.onCancel && this.props.onCancel()\n }\n\n handleConfirm = () => {\n this.props.closeOnConfirm && this.close()\n this.props.onConfirm && this.props.onConfirm()\n }\n\n handleMaskClick = () => {\n this.props.closeOnBlur && this.close()\n this.props.onBlue && this.props.onBlue()\n }\n\n close = () => {\n this.unrenderComponent()\n this.props.onClose && this.props.onClose()\n }\n\n}\n\nexport const showModal = (props) => {\n\n const hostNode = document.createElement('div')\n\n hostNode.style.display = 'none'\n document.body.appendChild(hostNode)\n\n props = {\n visible: true,\n closeOnConfirm: true,\n closeOnCancel: true,\n ...props\n }\n\n const close = () => {\n ReactDOM.unmountComponentAtNode(hostNode) && hostNode.parentNode.removeChild(hostNode)\n }\n\n const onConfirm = () => {\n props.onConfirm && props.onConfirm()\n }\n\n const onCancel = () => {\n props.onCancel && props.onCancel()\n }\n\n const onClose = () => {\n close()\n props.onClose && props.onClose()\n }\n\n const modalInstance = ReactDOM.render(\n
\n \n
\n {title}
\n {showClose && }\n{children || component}
\n {showFooter ? (\n \n
\n ) : null}\n {bottomText}
\n \n {showCancel && }\n {showConfirm && }\n
\n \n
\n )\n\n}","import './style.scss'\nimport React from 'react'\nimport PlayerModal from 'components/business/PlayerModal'\nimport { ContentUtils } from 'braft-utils'\n\nexport default class Video extends React.Component {\n\n render () {\n\n const { mediaData, language } = this.props\n const { url, name, meta } = mediaData\n\n return (\n \n \n {language.media[type]}\n
\n \n \n {name ? {name}
: null}\n{url}
\n {poster ? : null}\n\n \n \n
\n )\n\n }\n\n removeVideo = () => {\n this.props.editor.setValue(ContentUtils.removeBlock(this.props.editorState, this.props.block))\n }\n\n}","import './style.scss'\nimport React from 'react'\nimport PlayerModal from 'components/business/PlayerModal'\nimport { ContentUtils } from 'braft-utils'\n\nexport default class Audio extends React.Component {\n\n render () {\n\n const { mediaData, language } = this.props\n const { url, name, meta } = mediaData\n\n return (\n \n \n
\n \n \n \n \n
\n )\n\n }\n\n removeAudio = () => {\n this.props.editor.setValue(ContentUtils.removeBlock(this.props.editorState, this.props.block))\n }\n\n}","import './style.scss'\nimport React from 'react'\nimport PlayerModal from 'components/business/PlayerModal'\nimport { ContentUtils } from 'braft-utils'\n\nexport default class Embed extends React.Component {\n\n render () {\n\n const { mediaData, language } = this.props\n const { name, url, meta } = mediaData\n\n return (\n \n \n \n \n
\n )\n\n }\n\n removeEmbed = () => {\n this.props.editor.setValue(ContentUtils.removeBlock(this.props.editorState, this.props.block))\n }\n\n}","import React from 'react'\nimport { ContentUtils } from 'braft-utils'\nimport './style.scss'\n\nexport default class HorizontalLine extends React.Component {\n\n render () {\n\n return (\n \n
\n )\n\n }\n\n removeHorizontalLine = () => {\n this.props.editor.setValue(ContentUtils.removeBlock(this.props.editorState, this.props.block))\n }\n\n}","import React from 'react'\nimport Image from 'renderers/atomics/Image'\nimport Video from 'renderers/atomics/Video'\nimport Audio from 'renderers/atomics/Audio'\nimport Embed from 'renderers/atomics/Embed'\nimport HorizontalLine from 'renderers/atomics/HorizontalLine'\nimport { getExtensionBlockRendererFns } from 'helpers/extension'\n\nclass BlockRenderFnContext {\n superProps\n customBlockRendererFn\n\n getRenderFn = (superProps, customBlockRendererFn) => {\n this.superProps = superProps\n this.customBlockRendererFn = customBlockRendererFn\n\n return this.blockRendererFn\n }\n\n renderAtomicBlock = (props) => {\n const { superProps } = this\n\n const entityKey = props.block.getEntityAt(0)\n\n if (!entityKey) {\n return null\n }\n\n const entity = props.contentState.getEntity(entityKey)\n const mediaData = entity.getData()\n const mediaType = entity.getType()\n const mediaProps = {\n ...superProps,\n block: props.block,\n mediaData, entityKey\n }\n\n if (mediaType === 'IMAGE') {\n return \n \n
\n \n }\n })\n\n try {\n\n const extensionBlockRenderMaps = getExtensionBlockRenderMaps(props.editorId)\n\n customBlockRenderMap = extensionBlockRenderMaps.reduce((customBlockRenderMap, item) => {\n return customBlockRenderMap.merge(typeof item.renderMap === 'function' ? item.renderMap(props) : item.renderMap)\n }, customBlockRenderMap)\n\n if (blockRenderMap) {\n if (typeof blockRenderMap === 'function') {\n customBlockRenderMap = customBlockRenderMap.merge(blockRenderMap(props))\n } else {\n customBlockRenderMap = customBlockRenderMap.merge(blockRenderMap)\n }\n }\n\n customBlockRenderMap = DefaultDraftBlockRenderMap.merge(customBlockRenderMap)\n\n } catch (error) {\n console.warn(error)\n }\n\n return customBlockRenderMap\n\n}","export default (customBlockStyleFn) => (block) => {\n\n const blockAlignment = block.getData() && block.getData().get('textAlign')\n const blockIndent = block.getData() && block.getData().get('textIndent')\n const blockFloat = block.getData() && block.getData().get('float')\n\n let result = ''\n\n if (blockAlignment) {\n result = `bfa-${blockAlignment}`\n }\n\n if (blockIndent && blockIndent !== 0) {\n result += ` bftd-${blockIndent}`\n }\n\n if (blockFloat) {\n result += ` bff-${blockFloat}`\n }\n\n if (customBlockStyleFn) {\n result += (customBlockStyleFn(block) || '')\n }\n\n return result\n\n}","import { getExtensionInlineStyleMap } from 'helpers/extension'\n\nexport default (props, customStyleMap = {}) => {\n\n const extensionInlineStyleMap = getExtensionInlineStyleMap(props.editorId)\n\n return {\n 'SUPERSCRIPT': {\n position: 'relative',\n top: '-8px',\n fontSize: '11px'\n },\n 'SUBSCRIPT': {\n position: 'relative',\n bottom: '-8px',\n fontSize: '11px'\n },\n ...extensionInlineStyleMap,\n ...customStyleMap\n }\n\n}","import { BaseUtils } from 'braft-utils'\n\nlet resizeEventHandlers = []\nlet responsiveHelperInited = false\nlet debouce = false\n\nexport default {\n\n resolve (eventHandler) {\n let id = BaseUtils.UniqueIndex()\n resizeEventHandlers.push({ id, eventHandler })\n return id\n },\n\n unresolve (id) {\n resizeEventHandlers = resizeEventHandlers.filter(item => item.id !== id)\n }\n\n}\n\nif (!responsiveHelperInited && typeof window === 'object') {\n\n window.addEventListener('resize', (event) => {\n clearTimeout(debouce)\n debouce = setTimeout(() => {\n resizeEventHandlers.map((item) => {\n typeof item.eventHandler === 'function' && item.eventHandler(event)\n })\n debouce = false\n }, 100)\n })\n\n responsiveHelperInited = true\n\n}","import './style.scss'\nimport React from 'react'\nimport ResponsiveHelper from 'helpers/responsive'\n\nexport default class DropDown extends React.Component {\n\n responsiveResolveId = null\n dropDownHandlerElement = null\n dropDownContentElement = null\n state = {\n active: false,\n offset: 0\n }\n\n componentDidMount () {\n\n if (document) {\n document.body.addEventListener('click', this.registerClickEvent)\n this.responsiveResolveId = ResponsiveHelper.resolve(this.fixDropDownPosition)\n }\n\n }\n\n componentWillReceiveProps (next) {\n\n if (!this.props.disabled && next.disabled) {\n this.hide()\n }\n\n }\n\n componentDidUpdate (prevState) {\n\n if (!prevState.active && this.state.active) {\n this.fixDropDownPosition()\n }\n\n }\n\n componentWillUnmount () {\n\n if (document) {\n document.body.removeEventListener('click', this.registerClickEvent)\n ResponsiveHelper.unresolve(this.responsiveResolveId)\n }\n\n }\n\n render () {\n\n let { active, offset } = this.state\n let { caption, htmlCaption, title, disabled, showArrow, arrowActive, className, children, theme } = this.props\n\n disabled && (active = false)\n theme === 'light' && (className = ' light-theme ' + className)\n\n return (\n \n {htmlCaption ? (\n this.dropDownHandlerElement = instance}\n >\n ) : (\n this.dropDownHandlerElement = instance}\n >\n {caption}\n {showArrow !== false ? : null}\n \n )}\n this.dropDownContentElement = instance}\n >\n \n \n {children}\n \n \n \n )\n\n }\n\n fixDropDownPosition = () => {\n\n const viewRect = this.props.getContainerNode().getBoundingClientRect()\n const handlerRect = this.dropDownHandlerElement.getBoundingClientRect()\n const contentRect = this.dropDownContentElement.getBoundingClientRect()\n\n let offset = 0\n let right = handlerRect.right - handlerRect.width / 2 + contentRect.width / 2\n let left = handlerRect.left + handlerRect.width / 2 - contentRect.width / 2\n\n right = viewRect.right - right\n left = left - viewRect.left\n\n if (right < 10) {\n offset = right - 10\n } else if (left < 10) {\n offset = left * -1 + 10\n }\n\n if (offset !== this.state.offset) {\n this.setState({ offset })\n }\n\n }\n\n registerClickEvent = (event) => {\n\n const { autoHide } = this.props\n const { active } = this.state\n\n if (this.dropDownContentElement.contains(event.target) || this.dropDownHandlerElement.contains(event.target)) {\n return false\n }\n\n autoHide && active && this.hide()\n\n }\n\n toggle = () => {\n this.setState({ active: !this.state.active })\n }\n\n show = () => {\n this.setState({ active: true })\n }\n\n hide = () => {\n this.setState({ active: false })\n }\n\n}","import React from 'react'\n\nexport default (props) => {\n\n if (React.Fragment) {\n return {props.children} \n } else {\n return {props.children}\n }\n\n}","import './style.scss'\nimport React from 'react'\nimport Switch from 'components/common/Switch'\nimport DropDown from 'components/common/DropDown'\nimport ControlGroup from 'components/business/ControlGroup'\nimport { ContentUtils } from 'braft-utils'\n\nexport default class LinkEditor extends React.Component {\n\n constructor (props) {\n\n super(props)\n\n this.state = {\n text: '',\n href: '',\n target: props.defaultLinkTarget || '',\n textSelected: false\n }\n\n }\n\n dropDownInstance = null\n\n componentWillReceiveProps (nextProps) {\n\n const { href, target } = ContentUtils.getSelectionEntityData(nextProps.editorState, 'LINK')\n const textSelected = !ContentUtils.isSelectionCollapsed(this.props.editorState) && ContentUtils.getSelectionBlockType(this.props.editorState) !== 'atomic'\n\n let selectedText = ''\n\n if (textSelected) {\n selectedText = ContentUtils.getSelectionText(this.props.editorState)\n }\n\n this.setState({\n textSelected: textSelected,\n text: selectedText,\n href: href || '',\n target: typeof target === 'undefined' ? (nextProps.defaultLinkTarget || '') : (target || '')\n })\n\n }\n\n render () {\n\n const { allowInsertLinkText } = this.props\n const { text, href, target, textSelected } = this.state\n const caption = \n\n return (\n \n this.dropDownInstance = instance}\n className={'control-item dropdown link-editor-dropdown'}\n >\n \n {allowInsertLinkText ? \n \n \n \n \n )\n\n }\n\n handeKeyDown = (e) => {\n if (e.keyCode === 13) {\n this.handleConfirm()\n e.preventDefault()\n return false\n }\n }\n\n handleTnputText = (e) => {\n this.setState({\n text: e.currentTarget.value\n })\n }\n\n handleInputLink = (e) => {\n this.setState({\n href: e.currentTarget.value\n })\n }\n\n setTarget = () => {\n this.setState({\n target: this.state.target === '_blank' ? '' : '_blank'\n })\n }\n\n handleCancel = () => {\n this.dropDownInstance.hide()\n }\n\n handleUnlink = () => {\n this.dropDownInstance.hide()\n this.props.editor.setValue(ContentUtils.toggleSelectionLink(this.props.editorState, false))\n }\n\n handleConfirm = () => {\n\n let { text, href, target, textSelected } = this.state\n const hookReturns = this.props.hooks('toggle-link', { href, target })({ href, target })\n\n this.dropDownInstance.hide()\n this.props.editor.requestFocus()\n\n if (hookReturns === false) {\n return false\n }\n\n if (hookReturns) {\n typeof hookReturns.href === 'string' && (href = hookReturns.href)\n typeof hookReturns.target === 'string' && (target = hookReturns.target)\n }\n\n if (textSelected) {\n if (href) {\n this.props.editor.setValue(ContentUtils.toggleSelectionLink(this.props.editorState, href, target))\n } else {\n this.props.editor.setValue(ContentUtils.toggleSelectionLink(this.props.editorState, false))\n }\n } else {\n this.props.editor.setValue(ContentUtils.insertText(this.props.editorState, text || href, null, {\n type: 'LINK',\n data: { href, target }\n }))\n }\n\n }\n\n}","import './style.scss'\nimport React from 'react'\nimport { getHeadings } from 'configs/maps'\nimport DropDown from 'components/common/DropDown'\n\nexport default (props) => {\n\n let dropDownInstance = null\n\n const headings = getHeadings(props.language).filter(item => props.headings.indexOf(item.key) !== -1)\n const currentHeadingIndex = headings.findIndex((item) => item.command === props.current)\n const caption = headings[currentHeadingIndex] ? headings[currentHeadingIndex].title : props.language.controls.normal\n\n return (\n dropDownInstance = instance}\n className={'control-item dropdown headings-dropdown'}\n >\n \n {\n headings.map((item, index) => {\n let isActive = props.current === item.command\n return (\n {props.onChange(item.command, item.type),dropDownInstance.hide()}}\n >\n {item.text}\n \n )\n })\n }\n
\n \n )\n\n}","import React from 'react'\n\nexport const getHeadings = (lang) => [\n {\n key: 'header-one',\n title: lang.controls.header + ' 1',\n text: {lang.controls.header} 1
,\n type: 'block-type',\n command: 'header-one'\n }, {\n key: 'header-two',\n title: lang.controls.header + ' 2',\n text: {lang.controls.header} 2
,\n type: 'block-type',\n command: 'header-two'\n }, {\n key: 'header-three',\n title: lang.controls.header + ' 3',\n text: {lang.controls.header} 3
,\n type: 'block-type',\n command: 'header-three'\n }, {\n key: 'header-four',\n title: lang.controls.header + ' 4',\n text: {lang.controls.header} 4
,\n type: 'block-type',\n command: 'header-four'\n }, {\n key: 'header-five',\n title: lang.controls.header + ' 5',\n text: {lang.controls.header} 5
,\n type: 'block-type',\n command: 'header-five'\n }, {\n key: 'header-six',\n title: lang.controls.header + ' 6',\n text: {lang.controls.header} 6
,\n type: 'block-type',\n command: 'header-six'\n }, {\n key: 'unstyled',\n title: lang.controls.normal,\n text: lang.controls.normal,\n type: 'block-type',\n command: 'unstyled'\n }\n]\n\nexport const blocks = {\n 'header-one': 'h1',\n 'header-two': 'h2',\n 'header-three': 'h3',\n 'header-four': 'h4',\n 'header-fiv': 'h5',\n 'header-six': 'h6',\n 'unstyled': 'p',\n 'blockquote': 'blockquote'\n}","import './style.scss'\nimport React from 'react'\n\nexport default (props) => (\n \n \n {props.presetColors.map((item, index) => {\n let className = props.color && item.toLowerCase() === props.color.toLowerCase() ? 'color-item active' : 'color-item'\n return (\n {\n props.onChange(e.currentTarget.dataset.color, true)\n }}\n >\n \n )\n })}\n
\n \n)","import './style.scss'\nimport React from 'react'\nimport DropDown from 'components/common/DropDown'\nimport BuiltinColorPicker from 'components/common/ColorPicker'\nimport { ContentUtils } from 'braft-utils'\n\nexport default class TextColor extends React.Component {\n\n state = {\n colorType: 'color'\n }\n\n render () {\n\n let captionStyle = {}\n let currentColor = null\n let { colorType } = this.state\n\n const selectionStyles = this.props.editorState.getCurrentInlineStyle().toJS()\n\n selectionStyles.forEach(style => {\n\n if (style.indexOf('COLOR-') === 0) {\n captionStyle.color = '#' + style.split('-')[1]\n colorType === 'color' && (currentColor = captionStyle.color)\n }\n\n if (style.indexOf('BGCOLOR-') === 0) {\n captionStyle.backgroundColor = '#' + style.split('-')[1]\n colorType === 'background-color' && (currentColor = captionStyle.backgroundColor)\n }\n\n })\n\n const caption = (\n \n \n \n \n )\n\n const ColorPicker = this.props.colorPicker || BuiltinColorPicker\n\n return (\n this.dropDownInstance = instance}\n className={'control-item dropdown text-color-dropdown'}\n >\n \n \n {this.props.language.controls.textColor}\n {this.props.language.controls.backgroundColor}\n \n dropDownInstance = instance}\n className={'control-item dropdown bf-font-size-dropdown'}\n >\n \n {props.fontSizes.map((item, index) => {\n return (\n {toggleFontSize(event, props),dropDownInstance.hide()}}\n >{item}\n )\n })}\n
\n \n )\n\n}","import './style.scss'\nimport React from 'react'\nimport DropDown from 'components/common/DropDown'\nimport { ContentUtils } from 'braft-utils'\n\nconst toggleLineHeight = (event, props) => {\n\n let lineHeight = event.currentTarget.dataset.size\n const hookReturns = props.hooks('toggle-line-height', lineHeight)(lineHeight)\n\n if (hookReturns === false) {\n return false\n }\n\n if (!isNaN(hookReturns)) {\n lineHeight = hookReturns\n }\n\n props.editor.setValue(ContentUtils.toggleSelectionLineHeight(props.editorState, lineHeight))\n props.editor.requestFocus()\n\n}\n\nexport default (props) => {\n\n let caption = null\n let currentLineHeight = null\n let dropDownInstance = null\n\n props.lineHeights.find((item) => {\n if (ContentUtils.selectionHasInlineStyle(props.editorState, 'LINEHEIGHT-' + item)) {\n caption = item\n currentLineHeight = item\n return true\n }\n return false\n })\n\n return (\n dropDownInstance = instance}\n className={'control-item dropdown bf-line-height-dropdown'}\n >\n \n {props.lineHeights.map((item, index) => {\n return (\n {toggleLineHeight(event, props),dropDownInstance.hide()}}\n >{item}\n )\n })}\n
\n \n )\n\n}","import './style.scss'\nimport React from 'react'\nimport DropDown from 'components/common/DropDown'\nimport { ContentUtils } from 'braft-utils'\n\nconst toggleFontFamily = (event, props) => {\n\n let fontFamilyName = event.currentTarget.dataset.name\n const hookReturns = props.hooks('toggle-font-family', fontFamilyName)(fontFamilyName, props.fontFamilies)\n\n if (hookReturns === false) {\n return false\n }\n\n if (typeof hookReturns === 'string') {\n fontFamilyName = hookReturns\n }\n\n props.editor.setValue(ContentUtils.toggleSelectionFontFamily(props.editorState, fontFamilyName))\n props.editor.requestFocus()\n\n}\n\nexport default (props) => {\n\n let caption = null\n let currentIndex = null\n let dropDownInstance = null\n\n props.fontFamilies.find((item, index) => {\n if (ContentUtils.selectionHasInlineStyle(props.editorState, 'FONTFAMILY-' + item.name)) {\n caption = item.name\n currentIndex = index\n return true\n }\n return false\n })\n\n return (\n dropDownInstance = instance}\n className={'control-item dropdown font-family-dropdown'}\n >\n \n {props.fontFamilies.map((item, index) => {\n return (\n {toggleFontFamily(event, props),dropDownInstance.hide()}}\n >\n {item.name}\n \n )\n })}\n
\n \n )\n\n}","import React from 'react'\nimport { ContentUtils } from 'braft-utils'\nimport ControlGroup from 'components/business/ControlGroup'\n\nexport default class TextAlign extends React.Component {\n\n state = {\n currentAlignment: undefined\n }\n\n componentWillReceiveProps (next) {\n this.setState({\n currentAlignment: ContentUtils.getSelectionBlockData(next.editorState, 'textAlign')\n })\n }\n\n setAlignment = (event) => {\n\n let { alignment } = event.currentTarget.dataset\n const hookReturns = this.props.hooks('toggle-text-alignment', alignment)(alignment)\n\n if (this.props.textAligns.indexOf(hookReturns) > -1) {\n alignment = hookReturns\n }\n\n this.props.editor.setValue(ContentUtils.toggleSelectionAlignment(this.props.editorState, alignment))\n this.props.editor.requestFocus()\n\n }\n\n render () {\n\n const textAlignmentTitles = [\n this.props.language.controls.alignLeft,\n this.props.language.controls.alignCenter,\n this.props.language.controls.alignRight,\n this.props.language.controls.alignJustify\n ]\n\n return (\n \n {this.props.textAligns.map((item, index) => (\n \n \n \n ))}\n \n )\n }\n\n}","import './style.scss'\nimport React from 'react'\nimport DropDown from 'components/common/DropDown'\nimport { ContentUtils } from 'braft-utils'\n\nconst insertEmoji = (event, props) => {\n\n let emoji = event.currentTarget.dataset.emoji\n const hookReturns = props.hooks('insert-emoji', emoji)(emoji)\n\n if (hookReturns === false) {\n return false\n }\n\n if (typeof hookReturns === 'string') {\n emoji = hookReturns\n }\n\n props.editor.setValue(ContentUtils.insertText(props.editorState, emoji))\n props.editor.requestFocus()\n\n}\n\nexport default (props) => {\n\n return (\n \n \n \n {props.emojis.map((item, index) => {\n return (\n insertEmoji(event, props)}\n >{item}\n )\n })}\n
\n \n \n )\n\n}","import './style.scss'\nimport React from 'react'\nimport DropDown from 'components/common/DropDown'\nimport { ContentUtils } from 'braft-utils'\n\nconst toggleLetterSpacing = (event, props) => {\n\n let letterSpacing = event.currentTarget.dataset.size\n const hookReturns = props.hooks('toggle-letter-spacing', letterSpacing)(letterSpacing)\n\n if (hookReturns === false) {\n return false\n }\n\n if (!isNaN(hookReturns)) {\n letterSpacing = hookReturns\n }\n\n props.editor.setValue(ContentUtils.toggleSelectionLetterSpacing(props.editorState, letterSpacing))\n props.editor.requestFocus()\n\n}\n\nexport default (props) => {\n\n let caption = null\n let currentLetterSpacing = null\n let dropDownInstance = null\n\n props.letterSpacings.find((item) => {\n if (ContentUtils.selectionHasInlineStyle(props.editorState, 'LETTERSPACING-' + item)) {\n caption = item\n currentLetterSpacing = item\n return true\n }\n return false\n })\n\n return (\n dropDownInstance = instance}\n className={'control-item dropdown bf-letter-spacing-dropdown'}\n >\n \n {props.letterSpacings.map((item, index) => {\n return (\n {toggleLetterSpacing(event, props),dropDownInstance.hide()}}\n >{item}\n )\n })}\n
\n \n )\n\n}","import React from 'react'\nimport { ContentUtils } from 'braft-utils'\nimport ControlGroup from 'components/business/ControlGroup'\n\nexport default class TextAlign extends React.Component {\n\n state = {\n currentIndent: 0\n }\n\n componentWillReceiveProps (nextProps) {\n this.setState({\n currentIndent: ContentUtils.getSelectionBlockData(nextProps.editorState, 'textIndent') || 0\n })\n }\n\n increaseIndent = () => {\n this.props.editor.setValue(ContentUtils.increaseSelectionIndent(this.props.editorState))\n this.props.editor.requestFocus()\n }\n\n decreaseIndent = () => {\n this.props.editor.setValue(ContentUtils.decreaseSelectionIndent(this.props.editorState))\n this.props.editor.requestFocus()\n }\n\n render () {\n\n const { currentIndent } = this.state\n const { language } = this.props\n\n return (\n \n = 6}\n className={`control-item button button-indent-increase${currentIndent > 0 && currentIndent < 6 ? ' active' : ''}`}\n onClick={this.increaseIndent}\n >\n \n \n \n \n \n \n )\n\n }\n\n}","import './style.scss'\nimport React from 'react'\nimport getEditorControls from 'configs/controls'\nimport LinkEditor from 'components/business/LinkEditor'\nimport HeadingPicker from 'components/business/Headings'\nimport TextColorPicker from 'components/business/TextColor'\nimport FontSizePicker from 'components/business/FontSize'\nimport LineHeightPicker from 'components/business/LineHeight'\nimport FontFamilyPicker from 'components/business/FontFamily'\nimport TextAlign from 'components/business/TextAlign'\nimport EmojiPicker from 'components/business/EmojiPicker'\nimport LetterSpacingPicker from 'components/business/LetterSpacing'\nimport TextIndent from 'components/business/TextIndent'\nimport DropDown from 'components/common/DropDown'\nimport { ContentUtils } from 'braft-utils'\nimport { showModal } from 'components/common/Modal'\nimport { getExtensionControls } from 'helpers/extension'\n\nconst commandHookMap = {\n 'inline-style': 'toggle-inline-style',\n 'block-type': 'change-block-type',\n 'editor-method': 'exec-editor-command'\n}\n\nconst exclusiveInlineStyles = {\n 'superscript': 'subscript',\n 'subscript': 'superscript'\n}\n\nconst mergeControls = (commonProps, builtControls, extensionControls, extendControls) => {\n\n extensionControls = extensionControls.map(item => typeof item === 'function' ? item(commonProps) : item)\n extendControls = extendControls.map(item => typeof item === 'function' ? item(commonProps) : item)\n\n if (extensionControls.length === 0 && extendControls.length === 0) {\n return builtControls\n }\n\n return builtControls.map(item => {\n return extendControls.find(subItem => {\n return subItem.replace === (item.key || item)\n }) || extensionControls.find(subItem => {\n return subItem.replace === (item.key || item)\n }) || item\n }).concat(extensionControls.length ? 'separator' : '').concat(extensionControls.filter(item => {\n return !item.replace\n })).concat(extendControls.filter(item => {\n return typeof item === 'string' || !item.replace\n }))\n\n}\n\nexport default class ControlBar extends React.Component {\n\n allControls = []\n mediaLibiraryModal = null\n extendedModals = {}\n\n componentDidUpdate () {\n\n const { language } = this.props\n\n this.allControls.forEach(item => {\n if (item.type === 'modal') {\n if (item.modal && item.modal.id && this.extendedModals[item.modal.id]) {\n this.extendedModals[item.modal.id].update({ ...item.modal, language })\n }\n }\n })\n\n }\n\n getControlItemClassName (data) {\n\n let className = 'control-item button'\n let { type, command } = data\n\n if (type === 'inline-style' && ContentUtils.selectionHasInlineStyle(this.props.editorState, command)) {\n className += ' active'\n } else if (type === 'block-type' && ContentUtils.getSelectionBlockType(this.props.editorState) === command) {\n className += ' active'\n } else if (type === 'entity' && ContentUtils.getSelectionEntityType(this.props.editorState) === command) {\n className += ' active'\n }\n\n return className\n\n }\n\n applyControl (command, type, data = {}) {\n\n const hookReturns = this.props.hooks(commandHookMap[type] || type, command)(command)\n let editorState = this.props.editorState\n\n if (hookReturns === false) {\n return false\n }\n\n if (typeof hookReturns === 'string') {\n command = hookReturns\n }\n\n if (type === 'inline-style') {\n let exclusiveInlineStyle = exclusiveInlineStyles[command]\n if (exclusiveInlineStyle && ContentUtils.selectionHasInlineStyle(editorState, exclusiveInlineStyle)) {\n editorState = ContentUtils.toggleSelectionInlineStyle(editorState, exclusiveInlineStyle)\n }\n this.props.editor.setValue(ContentUtils.toggleSelectionInlineStyle(editorState, command))\n } else if (type === 'block-type') {\n this.props.editor.setValue(ContentUtils.toggleSelectionBlockType(editorState, command))\n } else if (type === 'entity') {\n this.props.editor.setValue(ContentUtils.toggleSelectionEntity(editorState, {\n type: command,\n mutability: data.mutability || 'MUTABLE',\n data: data.data || {}\n }))\n } else if (type === 'editor-method') {\n this.props.editor[command] && this.props.editor[command]()\n }\n\n }\n\n openBraftFinder = () => {\n\n if (!this.props.braftFinder || !this.props.braftFinder.ReactComponent) {\n return false\n }\n\n if (this.props.hooks('open-braft-finder')() === false) {\n return false\n }\n\n const mediaProps = this.props.media\n const MediaLibrary = this.props.braftFinder.ReactComponent\n\n this.mediaLibiraryModal = showModal({\n title: this.props.language.controls.mediaLibirary,\n language: this.props.language,\n width: 640,\n showFooter: false,\n className: mediaProps.modalClassName,\n component: (\n this.applyControl(command, 'block-type')}\n {...commonProps}\n />\n } else if (controlItem.type === 'text-color') {\n return \n {controlItem.text}\n \n )\n } else if (controlItem.type === 'dropdown') {\n return (\n \n {controlItem.component}\n \n )\n } else if (controlItem.type === 'modal') {\n return (\n {\n if (controlItem.modal && controlItem.modal.id) {\n if (this.extendedModals[controlItem.modal.id]) {\n this.extendedModals[controlItem.modal.id].active = true\n this.extendedModals[controlItem.modal.id].update({ ...controlItem.modal, language })\n } else {\n this.extendedModals[controlItem.modal.id] = showModal({ ...controlItem.modal, language })\n controlItem.modal.onCreate && controlItem.modal.onCreate(this.extendedModals[controlItem.modal.id])\n }\n }\n controlItem.onClick && controlItem.onClick(event)\n }}\n >\n {!controlItem.html ? controlItem.text : null}\n \n )\n } else if (controlItem.type === 'component') {\n return (\n {controlItem.component} \n )\n } else if (controlItem.type === 'button') {\n return (\n controlItem.onClick && controlItem.onClick(event)}\n >\n {!controlItem.html ? controlItem.text : null}\n \n )\n } else if (controlItem) {\n\n let disabled = false\n\n if (controlItem.command === 'undo') {\n disabled = editorState.getUndoStack().size === 0\n } else if (controlItem.command === 'redo') {\n disabled = editorState.getRedoStack().size === 0\n }\n\n return (\n this.applyControl(controlItem.command, controlItem.type, controlItem.data)}\n >\n {controlItem.text}\n \n )\n }\n })\n }\n \n )\n\n }\n\n preventDefault (event) {\n\n const tagName = event.target.tagName.toLowerCase()\n\n if (tagName === 'input' || tagName === 'label') {\n // ...\n } else {\n event.preventDefault()\n }\n\n }\n\n}","import 'draft-js/dist/Draft.css'\nimport 'assets/scss/_base.scss'\nimport React from 'react'\nimport languages from 'languages'\nimport BraftFinder from 'braft-finder'\nimport { ColorUtils, ContentUtils } from 'braft-utils'\nimport { Editor, EditorState } from 'draft-js'\nimport { Map } from 'immutable'\nimport getKeyBindingFn from 'configs/keybindings'\nimport defaultProps from 'configs/props'\nimport { keyCommandHandlers, returnHandlers, beforeInputHandlers, dropHandlers, droppedFilesHandlers, copyHandlers, pastedFilesHandlers, pastedTextHandlers, compositionStartHandler } from 'configs/handlers'\nimport { getBlockRendererFn, getBlockRenderMap, getBlockStyleFn, getCustomStyleMap, getCustomStyleFn, getDecorators } from 'renderers'\nimport { compositeStyleImportFn, compositeStyleExportFn, compositeEntityImportFn, compositeEntityExportFn, compositeBlockImportFn, compositeBlockExportFn, getPropInterceptors } from 'helpers/extension'\nimport ControlBar from 'components/business/ControlBar'\n\nconst buildHooks= (hooks) => (hookName, defaultReturns = {}) => {\n return hooks[hookName] || (() => defaultReturns)\n}\n\nconst filterColors = (colors, colors2) => {\n return colors.filter(item => {\n return !colors2.find(color => color.toLowerCase() === item.toLowerCase())\n }).filter((item, index, array) => array.indexOf(item) === index)\n}\n\nconst isControlEnabled = (props, controlName) => {\n return [...props.controls, ...props.extendControls].find(item => item === controlName || item.key === controlName) && props.excludeControls.indexOf(controlName) === -1\n}\n\nconst getConvertOptions = (props) => {\n\n const editorId = props.editorId || props.id\n const convertOptions = { ...defaultProps.converts, ...props.converts, fontFamilies: props.fontFamilies }\n\n convertOptions.styleImportFn = compositeStyleImportFn(convertOptions.styleImportFn, editorId)\n convertOptions.styleExportFn = compositeStyleExportFn(convertOptions.styleExportFn, editorId)\n convertOptions.entityImportFn = compositeEntityImportFn(convertOptions.entityImportFn, editorId)\n convertOptions.entityExportFn = compositeEntityExportFn(convertOptions.entityExportFn, editorId)\n convertOptions.blockImportFn = compositeBlockImportFn(convertOptions.blockImportFn, editorId)\n convertOptions.blockExportFn = compositeBlockExportFn(convertOptions.blockExportFn, editorId)\n\n return convertOptions\n\n}\n\nexport default class BraftEditor extends React.Component {\n\n static defaultProps = defaultProps\n\n constructor (props) {\n\n super(props)\n\n this.editorProps = this.getEditorProps(props)\n this.editorDecorators = getDecorators(this.editorProps.editorId || this.editorProps.id)\n\n this.isFocused = false\n this.isLiving = false\n this.braftFinder = null\n this.valueInitialized = !!(this.props.defaultValue || this.props.value)\n\n const defaultEditorState = (this.props.defaultValue || this.props.value) instanceof EditorState\n ? (this.props.defaultValue || this.props.value)\n : EditorState.createEmpty(this.editorDecorators)\n defaultEditorState.setConvertOptions(getConvertOptions(this.editorProps))\n\n let tempColors = []\n\n if (ContentUtils.isEditorState(defaultEditorState)) {\n\n const colors = ColorUtils.detectColorsFromDraftState(defaultEditorState.toRAW(true))\n defaultEditorState.setConvertOptions(getConvertOptions(this.editorProps))\n\n tempColors = filterColors(colors, this.editorProps.colors)\n }\n\n this.state = {\n tempColors,\n editorState: defaultEditorState,\n isFullscreen: false,\n draftProps: {}\n }\n this.containerNode = null\n }\n\n getEditorProps (props) {\n\n props = props || this.props\n\n const {value, defaultValue, onChange, ...restProps} = props// eslint-disable-line no-unused-vars\n const propInterceptors = getPropInterceptors(restProps.editorId || restProps.id)\n\n if (propInterceptors.length === 0) {\n return restProps\n }\n\n let porpsMap = Map(restProps)\n\n propInterceptors.forEach(interceptor => {\n porpsMap = porpsMap.merge(Map(interceptor(porpsMap.toJS(), this) || {}))\n })\n\n return porpsMap.toJS()\n\n }\n\n componentWillMount () {\n\n if (isControlEnabled(this.editorProps, 'media')) {\n\n const { language, media } = this.editorProps\n const { uploadFn, validateFn, items } = { ...defaultProps.media, ...media }\n\n this.braftFinder = new BraftFinder({\n items: items,\n language: language,\n uploader: uploadFn,\n validator: validateFn\n })\n\n this.forceUpdate()\n\n }\n\n }\n\n componentDidMount () {\n\n this.isLiving = true\n\n }\n\n componentDidUpdate (_, prevState) {\n\n if (prevState.editorState !== this.state.editorState) {\n this.state.editorState.setConvertOptions(getConvertOptions(this.editorProps))\n }\n\n }\n\n componentWillReceiveProps (props) {\n\n this.editorProps = this.getEditorProps(props)\n\n const { value: editorState } = props\n const { media, language } = this.editorProps\n const currentProps = this.getEditorProps()\n\n if (!isControlEnabled(currentProps, 'media') && isControlEnabled(this.editorProps, 'media') && !this.braftFinder) {\n\n const { uploadFn, validateFn, items } = { ...defaultProps.media, ...media }\n\n this.braftFinder = new BraftFinder({\n items: items,\n language: language,\n uploader: uploadFn,\n validator: validateFn\n })\n\n this.forceUpdate()\n\n }\n\n if (media && media.items && this.braftFinder) {\n this.braftFinder.setItems(media.items)\n }\n\n let nextEditorState\n\n if (!this.valueInitialized && typeof this.props.defaultValue === 'undefined' && ContentUtils.isEditorState(props.defaultValue)) {\n nextEditorState = props.defaultValue\n } else if (ContentUtils.isEditorState(editorState)) {\n nextEditorState = editorState\n }\n\n if (nextEditorState) {\n\n if (nextEditorState && nextEditorState !== this.state.editorState) {\n\n const tempColors = ColorUtils.detectColorsFromDraftState(nextEditorState.toRAW(true))\n nextEditorState.setConvertOptions(getConvertOptions(this.editorProps))\n\n this.setState({\n tempColors: filterColors([...this.state.tempColors, ...tempColors], currentProps.colors),\n editorState: nextEditorState\n }, () => {\n this.props.onChange && this.props.onChange(nextEditorState)\n })\n\n } else {\n this.setState({\n editorState: nextEditorState\n })\n }\n\n }\n\n }\n\n componentWillUnmount () {\n this.isLiving = false\n this.controlBarInstance && this.controlBarInstance.closeBraftFinder()\n }\n\n onChange = (editorState, callback) => {\n\n if (!(editorState instanceof EditorState)) {\n editorState = EditorState.set(editorState, {\n decorator: this.editorDecorators\n })\n }\n\n if (!editorState.convertOptions) {\n editorState.setConvertOptions(getConvertOptions(this.editorProps))\n }\n\n this.setState({ editorState }, () => {\n this.props.onChange && this.props.onChange(editorState)\n callback && callback(editorState)\n })\n\n }\n\n getDraftInstance = () => {\n return this.draftInstance\n }\n\n getFinderInstance = () => {\n return this.braftFinder\n }\n\n getValue = () => {\n return this.state.editorState\n }\n\n setValue = (editorState, callback) => {\n return this.onChange(editorState, callback)\n }\n\n forceRender = () => {\n\n const selectionState = this.state.editorState.getSelection()\n\n this.setValue(EditorState.set(this.state.editorState, {\n decorator: this.editorDecorators\n }), () => {\n this.setValue(EditorState.forceSelection(this.state.editorState, selectionState))\n })\n\n }\n\n onTab = (event) => {\n\n if (keyCommandHandlers('tab', this.state.editorState, this) === 'handled') {\n event.preventDefault()\n }\n\n this.editorProps.onTab && this.editorProps.onTab(event)\n\n }\n\n onFocus = () => {\n this.isFocused = true\n this.editorProps.onFocus && this.editorProps.onFocus(this.state.editorState)\n }\n\n onBlur = () => {\n this.isFocused = false\n this.editorProps.onBlur && this.editorProps.onBlur(this.state.editorState)\n }\n\n requestFocus = () => {\n setTimeout(() => this.draftInstance.focus(), 0)\n }\n\n handleKeyCommand = (command, editorState) => keyCommandHandlers(command, editorState, this)\n\n handleReturn = (event, editorState) => returnHandlers(event, editorState, this)\n\n handleBeforeInput = (chars, editorState) => beforeInputHandlers(chars, editorState, this)\n\n handleDrop = (selectionState, dataTransfer) => dropHandlers(selectionState, dataTransfer, this)\n\n handleDroppedFiles = (selectionState, files) => droppedFilesHandlers(selectionState, files, this)\n\n handlePastedFiles = (files) => pastedFilesHandlers(files, this)\n\n handleCopyContent = (event) => copyHandlers(event, this)\n\n handlePastedText = (text, html, editorState) => pastedTextHandlers(text, html, editorState, this)\n\n handleCompositionStart = (event) => compositionStartHandler(event, this)\n\n undo = () => {\n this.setValue(ContentUtils.undo(this.state.editorState))\n }\n\n redo = () => {\n this.setValue(ContentUtils.redo(this.state.editorState))\n }\n\n removeSelectionInlineStyles = () => {\n this.setValue(ContentUtils.removeSelectionInlineStyles(this.state.editorState))\n }\n\n insertHorizontalLine = () => {\n this.setValue(ContentUtils.insertHorizontalLine(this.state.editorState))\n }\n\n clearEditorContent = () => {\n this.setValue(ContentUtils.clear(this.state.editorState), (editorState) => {\n this.setValue(ContentUtils.toggleSelectionIndent(editorState, 0))\n })\n }\n\n toggleFullscreen = (fullscreen) => {\n\n this.setState({\n isFullscreen: typeof fullscreen !== 'undefined' ? fullscreen : !this.state.isFullscreen\n }, () => {\n this.editorProps.onFullscreen && this.editorProps.onFullscreen(this.state.isFullscreen)\n })\n\n }\n\n lockOrUnlockEditor (editorLocked) {\n this.setState({ editorLocked })\n }\n\n setEditorContainerNode = (containerNode) => {\n this.containerNode = containerNode\n }\n\n render () {\n\n let {\n id, editorId, controls, excludeControls, extendControls, readOnly, disabled, media, language, colors, colorPicker, colorPickerTheme, colorPickerAutoHide, hooks,\n fontSizes, fontFamilies, emojis, placeholder, fixPlaceholder, headings, imageControls, imageResizable, imageEqualRatio, lineHeights, letterSpacings, textAligns, textBackgroundColor, allowInsertLinkText, defaultLinkTarget,\n extendAtomics, className, style, controlBarClassName, controlBarStyle, contentClassName, contentStyle, stripPastedStyles, componentBelowControlBar\n } = this.editorProps\n\n const { isFullscreen, editorState } = this.state\n\n editorId = editorId || id\n hooks = buildHooks(hooks)\n controls = controls.filter(item => excludeControls.indexOf(item) === -1)\n language = (typeof language === 'function' ? language(languages, 'braft-editor') : languages[language]) || languages[defaultProps.language]\n\n const externalMedias = media && media.externals ? {\n ...defaultProps.media.externals,\n ...media.externals\n } : defaultProps.media.externals\n\n const accepts = media && media.accepts ? {\n ...defaultProps.media.accepts,\n ...media.accepts\n } : defaultProps.media.accepts\n\n media = { ...defaultProps.media, ...media, externalMedias, accepts }\n\n if (!media.uploadFn) {\n media.video = false\n media.audio = false\n }\n\n const controlBarProps = {\n editor: this,\n editorState: editorState,\n braftFinder: this.braftFinder,\n ref: instance => this.controlBarInstance = instance,\n getContainerNode: () => this.containerNode,\n className: controlBarClassName,\n style: controlBarStyle,\n colors: [...colors, ...this.state.tempColors],\n colorPicker, colorPickerTheme, colorPickerAutoHide, hooks, editorId, media, controls, language, extendControls, headings, fontSizes, fontFamilies,\n emojis, lineHeights, letterSpacings, textAligns, textBackgroundColor, allowInsertLinkText, defaultLinkTarget\n }\n\n const { unitExportFn } = editorState.convertOptions\n\n const commonProps = {\n editor: this, editorId, hooks,\n editorState: editorState,\n containerNode: this.containerNode,\n imageControls, imageResizable, language, extendAtomics, imageEqualRatio\n }\n\n const blockRendererFn = getBlockRendererFn(commonProps, this.editorProps.blockRendererFn)\n const blockRenderMap = getBlockRenderMap(commonProps, this.editorProps.blockRenderMap)\n const blockStyleFn = getBlockStyleFn(this.editorProps.blockStyleFn)\n const customStyleMap = getCustomStyleMap(commonProps, this.editorProps.customStyleMap)\n const customStyleFn = getCustomStyleFn(commonProps, { fontFamilies, unitExportFn, customStyleFn: this.editorProps.customStyleFn })\n\n const keyBindingFn = getKeyBindingFn(this.editorProps.keyBindingFn)\n\n const mixedProps = {}\n\n if (this.state.editorLocked || this.editorProps.disabled || this.editorProps.readOnly || this.editorProps.draftProps.readOnly) {\n mixedProps.readOnly = true\n }\n\n if (\n placeholder && fixPlaceholder && editorState.isEmpty() &&\n editorState.getCurrentContent().getFirstBlock().getType() !== 'unstyled'\n ) {\n placeholder = ''\n }\n\n const draftProps = {\n ref: instance => { this.draftInstance = instance },\n editorState: editorState,\n handleKeyCommand: this.handleKeyCommand,\n handleReturn: this.handleReturn,\n handleBeforeInput: this.handleBeforeInput,\n handleDrop: this.handleDrop,\n handleDroppedFiles: this.handleDroppedFiles,\n handlePastedText: this.handlePastedText,\n handlePastedFiles: this.handlePastedFiles,\n onChange: this.onChange,\n onTab: this.onTab,\n onFocus: this.onFocus,\n onBlur: this.onBlur,\n blockRenderMap, blockRendererFn, blockStyleFn,\n customStyleMap, customStyleFn,\n keyBindingFn, placeholder, stripPastedStyles,\n ...this.editorProps.draftProps,\n ...mixedProps\n }\n\n return (\n \n \n