Ant Design Snippet

Ant Design Snippet.md

Index

Centered Form

// Import Components
import { Form, Input, Button, Row, Col, Spin, Checkbox } from 'antd'

const Login () => {

    // On Submit
    const _onSubmit = (values) => {
        console.log(values)
    }

    return (
        <div style={ containerStyles }>
            <Row justify='space-between' align='middle' style={ rowStyles }>
                {/* Image */}
                <Col xs={0} sm={0} md={12} lg={14}>
                    <Image style={{width: '100%', maxHeight: '600px'}} src={ leftCover} alt='login-cover'/>
                </Col>
                {/* Form */}
                <Col xs={24} sm={24} md={12} lg={10}>
                    <Form
                        layout='vertical'
                        style={ formStyles }
                        onFinish={ _onSubmit }
                        autoComplete='off'
                    >
                        <Row gutter={ [16, 16] }>
                             {/* Title */}
                            <h2 style={{ textAlign: 'center' }}>Sign in to ***</h2>

                            {/* Email */}
                            <Col span={24}>
                                <Form.Item 
                                    name='email'
                                    label='Email'
                                    rules={[
                                        {
                                            required: true,
                                            message: 'This field is required'
                                        }
                                    ]}
                                 >
                                  <Input />
                                 </Form.Item>
                            </Col>

                            {/* Password */}
                            <Col span={24}>
                                <Form.Item
                                    name='password'
                                    label='Password'
                                    rules={[
                                        {   
                                            required: true,
                                            message: 'This field is required'
                                        }
                                    ]}
                                    >
                                    <Input.Password/>
                                </Form.Item>
                            </Col>

                            {/* Remember Me */}
                            <Col span={24}>
                                <Form.Item >
                                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                        <Checkbox className='remember'>Remember me</Checkbox>
                                        <Link className='forgot' href='' >Forgot Password</Link>
                                    </div>
                                </Form.Item>
                            </Col>

                            {/* Submit Button */}
                            <Col span={24}>
                                <Form.Item>
                                    <Button className='submit' htmlType='submit'>SIGN IN</Button>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
        </div>
    )
}

// Styles
const containerStyles = {
    width: '100vw',
    height: '100vh',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'auto',
}

const rowStyles = {
    width: '100%', 
    height: '100%', 
    padding: '1rem'
}

const formStyles = {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    maxHeight: '600px',
    maxWidth: '450px',
    borderRadius: '20px',
    boxShadow: '0px 4px 24px -1px rgba(117, 117, 117, 0.25)',
    backdropFilter: 'blur(22.5px)',
    padding: '20px',
    margin: '0 auto'
}

export default Login

Centered Spinner

 <div style={ containerStyles }>
      <Spin size='large' />
 </div>

// Styles
const containerStyles = {
  width: '100%',
  height: '100%',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center'
}

Select [Example 1]

    // Get Data from Redux Store
    const area = useAppSelector(state => state?.area?.area ?? [])
    const areaStatus = useAppSelector(state => state?.area?.status ?? 'idle')
    
    // States
    const [areaOptions, setAreaOptions] = useState<object[]>([])
    
    // Get All Area
    useEffect(() => {
        if (areaStatus === 'idle') {
            dispatch(getArea())
        }

        // Set Area Options
        let newOptions: any = []
        area?.forEach((item: any) => {
            newOptions.push({
                key: item?.id,
                value: item?.id,
                label: item?.area_name
            })
        })
        setAreaOptions(newOptions)

    }, [area, areaStatus])
    
    <Form.Item label='Area'>
        <Select
            placeholder='Select Area'
            loading={area.length === 0}
            allowClear
            showSearch
            options={areaOptions}
            optionFilterProp='children'
            filterOption={(input, option: any) =>
                (option?.label ?? '')
                .toLowerCase()
                .includes(input.toLowerCase())
            }
            onChange={_onChangeArea}
        />
    </Form.Item>    
    

Select [Example 2]

    // Import Components
    import { Form, Select } from 'antd'
    
    // Import Constants
    const { Option } = Select
    
    // Get Data from Redux Store
    const area = useAppSelector(state => state?.area?.area ?? [])
    const areaStatus = useAppSelector(state => state?.area?.status ?? 'idle')
    
    <Form.Item label='Area'>
        <Select
            placeholder='Select Area'
            loading={area.length === 0}
            allowClear
            showSearch
            optionFilterProp='children' // required for sort filtering
            onChange={_onChangeArea}
        >
            {area.map((item: any, i: any) =>
                <Option key={i} value={item.id}>{item.area_name}</Option>
            )}
        </Select>
    </Form.Item>