Zubair Mohsin awebartisan

💭

Trying

I work with Laravel, Inertia.js, React and build Shopify Apps.

awebartisan / dynamic_input_fields.html

Created March 1, 2021 09:29

Dynamic input fields with Alpine.js

	<div x-data="{ bankAccounts: [{
	id: '',
	accountNumber: ''
	}] }">
	<template x-for="(bankAccount, index, bankAccounts) in bankAccounts" :key="index">
	<div class="grid grid-cols-6 gap-6 mt-2">
	<div class="col-span-3 md:col-span-3 sm:col-span-2">
	<x-jet-label for="city">Bank</x-jet-label>
	<select :name="`bank_info[${index}][bank_id]`" id="bank"
	class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm mt-1 block w-full">

awebartisan / useDragDrop.ts

Last active November 2, 2020 19:35

useDragDrop hook that handles DragStart, DragOver and Drop operations

	import React from 'react';

	const handleDragStart = (event: React.DragEvent) => {
	event.dataTransfer.effectAllowed = 'move';
	event.dataTransfer.setData(
	'text/plain',
	event.currentTarget.getAttribute('data-index'),
	);
	};

awebartisan / timezones.js

Last active April 21, 2020 18:36

Timezones as value label objects. Using them in Shopify Polaris for Select dropdown.

	const timezones = [
	{value:"Etc/GMT+12", label:"(GMT-12:00) International Date Line West"},
	{value:"Pacific/Pago_Pago", label:"(GMT-11:00) American Samoa"},
	{value:"Pacific/Midway", label:"(GMT-11:00) Midway Island"},
	{value:"Pacific/Honolulu", label:"(GMT-10:00) Hawaii"},
	{value:"America/Juneau", label:"(GMT-09:00) Alaska"},
	{value:"America/Los_Angeles", label:"(GMT-08:00) Pacific Time (US & Canada)"},
	{value:"America/Tijuana", label:"(GMT-08:00) Tijuana"},
	{value:"America/Phoenix", label:"(GMT-07:00) Arizona"},
	{value:"America/Chihuahua", label:"(GMT-07:00) Chihuahua"},

awebartisan / App.js

Created February 23, 2019 09:35

Event Handler in parent component

	import React, { Component } from "react";
	import ReactDOM from "react-dom";
	import {
	AppProvider,
	Page,
	Card,
	Layout,
	} from "@shopify/polaris";
	import Wysiwyg from "./components/wysiwyg";

awebartisan / wysiwyg.jsx

Last active February 23, 2019 09:38

Adding event handler in Wysiwyg component

	import React, { Component } from "react";
	import Trix from "trix";

	class Wysiwyg extends React.Component {
	constructor(props) {
	super(props);
	this.trixInput = React.createRef();
	}

	componentDidMount() {

awebartisan / App.js

Last active February 23, 2019 09:34

Wysiwyg Trix Editor React JSX

	import React, { Component } from "react";
	import ReactDOM from "react-dom";
	import {
	AppProvider,
	Page,
	Card,
	Layout,
	} from "@shopify/polaris";
	import Wysiwyg from "./components/wysiwyg";