@ant-design/icons#VerticalAlignTopOutlined JavaScript Examples

The following examples show how to use @ant-design/icons#VerticalAlignTopOutlined. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: backTop.js    From ant-simple-pro with MIT License 6 votes vote down vote up 
BackTopCompent = memo(function BackTopCompent({ element, ...props }) {
  return (
    <BackTop {...props} target={() => document.querySelector(element)} style={{ right: '30px', bottom: '30px' }}>
      <div className={style.backTop}>
        <VerticalAlignTopOutlined />
      </div>
    </BackTop>
  )
})
Example #2
Source File: CreateEvent.js    From react-portal with MIT License 4 votes vote down vote up 
CreateEvent = props => {
	const [isLoading, setIsLoading] = useState(false);
	const [fileList, setFileList] = useState(null);
	const [mdx, setMdx] = useState("");
	const [isModalVisible, setIsModalVisible] = useState(false);
	const [form] = Form.useForm();
	const [title, setTitle] = useState("");
	const [slug, setSlug] = useState("");

	useEffect(() => {
		form.setFieldsValue({
			maxRegister: 1
		});
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	const uploadprops = {
		name: "file",
		action: "https://www.api.dsckiet.com/dev",
		headers: {
			authorization: "authorization-text"
		},
		onChange(info) {
			if (info.file.status === "done") {
				message.success(`${info.file.name} file uploaded successfully`);
			} else if (info.file.status === "error") {
				message.error(`${info.file.name} file upload failed.`);
			}
			setFileList(info.fileList);
		}
	};

	function disabledDate(current) {
		// Can not select days before today and today
		return current && current < moment().endOf("day");
	}

	const handleSubmit = async values => {
		if (values.isRegistrationRequired === false) {
			values.isRegistrationOpened = false;
		}

		try {
			let xtime =
				values.startTime.format("h:mm a") +
				" to " +
				values.endTime.format("h:mm a");
			const formData = new FormData();
			formData.append("image", values.image.file.originFileObj);
			formData.append("title", title);
			formData.append("slug", slug);
			formData.append("description", values.description);
			formData.append("time", xtime);
			formData.append("venue", values.venue);
			formData.append("maxRegister", values.maxRegister);
			formData.append("startDate", values.dates[0].format("YYYY-MM-DD"));
			formData.append("endDate", values.dates[1].format("YYYY-MM-DD"));
			if (values.isRegistrationRequired === undefined) {
				formData.append("isRegistrationRequired", false);
			} else {
				formData.append(
					"isRegistrationRequired",
					values.isRegistrationRequired
				);
			}
			if (values.isRegistrationOpened === undefined) {
				formData.append("isRegistrationOpened", false);
			} else {
				formData.append(
					"isRegistrationOpened",
					values.isRegistrationOpened
				);
			}
			const res = await addEventService(formData);
			if (res.message === "success") {
				_notification("success", "Success", "Event Added");
				props.onAddEvent();
			} else {
				_notification("error", "Error", res.message);
			}
			setIsLoading(false);
		} catch (err) {
			_notification("error", "Error", err.message);
			setIsLoading(false);
		}
	};

	const handlePreview = () => {
		setIsModalVisible(!isModalVisible);
	};

	const slugify = text => {
		return text
			.replace(/ /g, "-")
			.replace(/[^\w-]+/g, "-")
			.replace(/-+/g, "-");
	};

	const renderers = {
		img: ({ alt, src, title }) => (
			<img
				alt={alt}
				src={src}
				title={title}
				style={{
					maxWidth: "100%",
					borderRadius: "8px",
					marginTop: "12px"
				}}
			/>
		)
	};

	return (
		<>
			<Form onFinish={handleSubmit} layout="vertical" form={form}>
				{/* <Form.Item
					label="Event Title"
					required
					name="title"
					rules={[
						{
							required: true,
							message: "Please input event title!"
						}
					]}
				> */}

				<Input
					required
					value={title ? title : ""}
					type="text"
					placeholder="Event title"
					onChange={e => {
						setTitle(e.target.value);
						setSlug(slugify(e.target.value));
					}}
					style={{ marginBottom: "20px" }}
				/>
				{/* </Form.Item> */}
				{/* <Form.Item
					label="Event Slug"
					required
					name="slug"
					rules={[
						{
							required: true,
							message: "Please input event slug!"
						}
					]}
				> */}
				<Input
					value={slug ? slug : ""}
					type="text"
					placeholder="Event slug"
					onChange={e => setSlug(slugify(e.target.value))}
					style={{ marginBottom: "20px" }}
				/>
				{/* </Form.Item> */}
				<Form.Item
					label="Description"
					required
					name="description"
					rules={[
						{
							required: true,
							message: "Please enter description!"
						}
					]}
				>
					<TextArea
						rows={4}
						placeholder="Enter event description"
						onChange={e => setMdx(e.target.value)}
					/>
				</Form.Item>
				<Form.Item>
					<Button type="primary" onClick={handlePreview}>
						Preview Event
					</Button>
				</Form.Item>
				<Form.Item
					label="Upload Picture"
					required
					name="image"
					rules={[
						{
							required: true,
							message: "Please select image!"
						}
					]}
				>
					<Upload
						{...uploadprops}
						fileList={fileList}
						listType="picture"
					>
						<Button>
							<VerticalAlignTopOutlined /> Click to Upload
						</Button>
					</Upload>
				</Form.Item>

				<Form.Item
					label="Event Venue"
					required
					name="venue"
					rules={[
						{
							required: true,
							message: "Please input event venue!"
						}
					]}
				>
					<Input type="text" placeholder="Event venue" />
				</Form.Item>

				<Form.Item
					label="Event Dates"
					required
					name="dates"
					rules={[
						{
							required: true,
							message: "Please select event dates!"
						}
					]}
				>
					<RangePicker
						style={{ width: "100%" }}
						disabledDate={disabledDate}
					/>
				</Form.Item>

				<Row gutter={16}>
					<Col span={12}>
						<Form.Item
							label="Start Time"
							required
							name="startTime"
							rules={[
								{
									required: true,
									message: "Please select event timings!"
								}
							]}
						>
							<TimePicker
								use12Hours
								format="h:mm a"
								style={{ width: "100%" }}
							/>
						</Form.Item>
					</Col>
					<Col span={12}>
						<Form.Item
							label="End Time"
							required
							name="endTime"
							rules={[
								{
									required: true,
									message: "Please select event timings!"
								}
							]}
						>
							<TimePicker
								use12Hours
								format="h:mm a"
								style={{ width: "100%" }}
							/>
						</Form.Item>
					</Col>
				</Row>

				<Row gutter={16}>
					<Col span={12}>
						<Form.Item
							valuePropName="checked"
							name="isRegistrationRequired"
						>
							<Checkbox>Is Registration Required?</Checkbox>
						</Form.Item>
					</Col>
					<Col span={12}>
						<Checkbox.Group>
							<Form.Item
								name="isRegistrationCompleted"
								valuePropName="checked"
							>
								<Checkbox>Is Registration Open?</Checkbox>
							</Form.Item>
						</Checkbox.Group>
					</Col>
				</Row>

				<Form.Item
					label="Max Registration"
					name="maxRegister"
					rules={[
						{
							required: true,
							message: "Please enter maximum registrations."
						}
					]}
				>
					<InputNumber min={1} />
				</Form.Item>

				<Form.Item>
					<Button
						type="primary"
						htmlType="submit"
						className="login-form-button"
						loading={isLoading}
					>
						Add Event
					</Button>
				</Form.Item>
			</Form>
			<Modal
				title="Desription Preview"
				visible={isModalVisible}
				footer={null}
				onCancel={() => setIsModalVisible(!isModalVisible)}
			>
				<ReactMarkdown components={renderers}>{mdx}</ReactMarkdown>
			</Modal>
		</>
	);
}